學習使用grunt來打包JavaScript和CSS程式的教程，gruntcss

學習使用grunt來打包JavaScript和CSS程式的教程，gruntcss

Java世界裡的Maven提供了強大的包依賴管理和構建生命週期管理。在JavaScript的世界裡，隨著Node.js的流行，JavaScript原生的構建工具已經成為可能。

Grunt.js是基於Node.js的自動化任務運行器。Grunt.js結合NPM的包依賴管理，完全可以媲美Maven。Grunt.js天然適合前端應用程式的構建——不僅限於JavaScript項目，同樣可以用於其他語言的應用程式構建。越來越多的JavaScript項目已經在使用Grunt，其中最大的使用者包括著名的jQuery項目。

Grunt的生態系統在迅速的成長，目前已經有上百種外掛程式發布在NPM上可供選擇。同時，任何人都可以方便的發布自己的外掛程式到NPM上供其他人使用。

Grunt沒有像Maven那樣強調構建的生命週期，各種任務的執行順序可以隨意配置。Grunt本身僅是一個執行器，大量的功能都存在於NPM管理的外掛程式中。特別是以grunt-contrib-開頭的核心外掛程式，覆蓋了大部分的核心功能，比如handlebars，jade，less，compass，jshint，jasmine，clean，concat，minify，copy，uglify，watch，minify，uglify等。

通過提供通用的介面以進行代碼規範檢驗（Lint）、合并、壓縮、測試及版本控制等任務，Grunt使入門門檻大大降低了。

一，安裝nodejs，grunt,以及grunt外掛程式
1，安裝nodejs
：https://nodejs.org/download/

2，安裝grunt，以及外掛程式

npm install grunt -g  //安裝grunt,-g全域變數 npm install grunt-cli -g //安裝grunt命令列 npm install grunt --save-dev  //安裝grunt,--save-dev儲存到安裝目錄 npm install grunt-cli --save-dev //安裝grunt命令列 npm install grunt-contrib-jshint --save-dev //js文法檢測外掛程式 npm install grunt-contrib-concat --save-dev //js合并外掛程式 npm install grunt-contrib-uglify --save-dev //js壓縮外掛程式 npm install grunt-contrib-cssmin --save-dev //CSS壓縮外掛程式 

grunt和grunt-cli，-g和--save-dev都安裝一下，建議這樣，省得出錯。
3，建立工作目錄
當上面的安裝都結束後，node_modules裡面就包含了上面安裝的外掛程式，將nodejs安裝目錄中的node_modules，copy到新的目錄中，並建立Gruntfile.js，package.json，
在這裡要注意一點，Gruntfile.js，package.json一定要與這個node_modules同一目錄下，不然在調用grunt外掛程式的時候會報錯的，例如：

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?Warning: Task "uglify" not found. Use --force to continue.

如果你沒有裝grunt-contrib-uglify外掛程式，也會報這個錯誤。

二，建立Gruntfile.js和package.json
1，package.json

{  "name": "jstest",  "file": "function",  "version": "0.1.0",  "devDependencies": {  "grunt": "~0.4.5",  "grunt-contrib-jshint": "~0.11.3", //後面的數字是版本號碼，從各個外掛程式目錄下的package.json能找到  "grunt-contrib-concat": "~0.5.1",  "grunt-contrib-uglify": "~0.9.2",  "grunt-contrib-cssmin": "~0.14.0"  } } 

2，Gruntfile.js

module.exports = function (grunt) {  // grunt配置  grunt.initConfig({  pkg: grunt.file.readJSON('package.json'),  concat: {   options: {   separator: ';'   },   dist: {   src: ['js_s/function.js', 'js_s/jquery.validate.js'],   dest: 'js_d/main.js' //合并不壓縮   }  },  uglify: {   options: {   banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' //檔案頂部的注釋，可自訂   },   build: { //將package.json中的file對應的檔案，進行壓縮並重新命名   src: 'js_s/<%= pkg.file %>.js',  //注意空格，官方配置例子是pkg.name   dest: 'js_d/<%= pkg.file %>.min.js' //注意空格，官方配置例子是pkg.name   },   buildall: {//將js_s檔案夾下的所有js檔案，壓縮後，放到js_d檔案夾中，檔案名稱不變   files: [{   expand:true,   cwd:'js_s',//js目錄下   src:'**/*.js',//所有js檔案   dest: 'js_d'//輸出到此目錄下   }]   },   hebin: {//將function.js和jquery.validate.js，合并,並壓縮成main.min.js   files: {    'js_d/main.min.js': ['js_s/function.js', 'js_s/jquery.validate.js']   }   },   ymain: {//將main.js壓縮成main1.min.js   src: 'js_d/main.js',   dest: 'js_d/main1.min.js'   }  },  jshint: { //檢查，function.js是不是有語法錯誤   all: ['js_s/function.js']  },  cssmin: {   combine: {     files: { //將css_s檔案夾下的css檔案合成一個      'css_d/main.css': ['css_s/*.css']     }    },   minify: {     options: {      keepSpecialComments: 0, /* 刪除所有注釋 */      banner: '/* minified css file */'     },     files: { //單個CSS檔案壓縮      'css_d/index.min.css': ['css_s/index.css']     }    },   test: {//按檔案夾下的所有CSS檔案，壓縮後，放到新的檔案夾中，檔案名稱不變     files: [{    expand:true,    cwd:'css_s',//css目錄下    src:'**/*.css',//所有css檔案    dest: 'css_d'//輸出到此目錄下    }]    }   }  });  // 載入外掛程式  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.loadNpmTasks('grunt-contrib-jshint');  grunt.loadNpmTasks('grunt-contrib-cssmin');   // 是否調用外掛程式功能  //grunt.registerTask('default', ['concat','uglify','jshint','cssmin']);  // grunt.registerTask('default', ['uglify']);  // grunt.registerTask('default', ['concat']);  //grunt.registerTask('default', ['jshint']);  grunt.registerTask('default', ['cssmin']); //CSSMIN外掛程式的功能能用，其他功能都不起作用 } 

設定檔好了以後，在命令列下，輸入grunt就可以合并壓縮了。上面的測試檔案，基本上都是圍繞著，合并與壓縮來的，對於做WEB前端的來說，這個還是比較重要的。
從壓縮效果來說，JS的壓縮效果比較理想，CSS一般，當然，這根寫的代碼有關係。

您可能感興趣的文章:

• 使用GruntJS構建Web程式之合并壓縮篇
• 使用GruntJS構建Web程式之構建篇
• 使用GruntJS構建Web程式之安裝篇
• 使用GruntJS連結與壓縮多個JavaScript檔案過程詳解
• 使用Grunt.js管理你項目的應用說明