Java世界里的Maven提供了強(qiáng)大的包依賴管理和構(gòu)建生命周期管理。在JavaScript的世界里，隨著Node.js的流行，JavaScript原生的構(gòu)建工具已經(jīng)成為可能。
Grunt.js是基于Node.js的自動化任務(wù)運行器。Grunt.js結(jié)合NPM的包依賴管理，完全可以媲美Maven。Grunt.js天然適合前端應(yīng)用程序的構(gòu)建――不僅限于JavaScript項目，同樣可以用于其他語言的應(yīng)用程序構(gòu)建。越來越多的JavaScript項目已經(jīng)在使用Grunt，其中最大的使用者包括著名的jQuery項目。
Grunt的生態(tài)系統(tǒng)在迅速的成長，目前已經(jīng)有上百種插件發(fā)布在NPM上可供選擇。同時，任何人都可以方便的發(fā)布自己的插件到NPM上供其他人使用。
Grunt沒有像Maven那樣強(qiáng)調(diào)構(gòu)建的生命周期，各種任務(wù)的執(zhí)行順序可以隨意配置。Grunt本身僅是一個執(zhí)行器，大量的功能都存在于NPM管理的插件中。特別是以grunt-contrib-開頭的核心插件，覆蓋了大部分的核心功能，比如handlebars，jade，less，compass，jshint，jasmine，clean，concat，minify，copy，uglify，watch，minify，uglify等。
通過提供通用的接口以進(jìn)行代碼規(guī)范檢驗（Lint）、合并、壓縮、測試及版本控制等任務(wù)，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，創(chuàng)建工作目錄
當(dāng)上面的安裝都結(jié)束后，node_modules里面就包含了上面安裝的插件，將nodejs安裝目錄中的node_modules，copy到新的目錄中，并創(chuàng)建Gruntfile.js，package.json，
在這里要注意一點，Gruntfile.js，package.json一定要與這個node_modules同一目錄下，不然在調(diào)用grunt插件的時候會報錯的，例如：
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?Warning: Task "uglify" not found. Use --force to continue.
如果你沒有裝grunt-contrib-uglify插件，也會報這個錯誤。
二，創(chuàng)建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", //后面的數(shù)字是版本號，從各個插件目錄下的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對應(yīng)的文件，進(jìn)行壓縮并重命名 src: 'js_s/<%= pkg.file %>.js', //注意空格，官方配置例子是pkg.name dest: 'js_d/<%= pkg.file %>.min.js' //注意空格，官方配置例子是pkg.name }, buildall: {//將js_s文件夾下的所有js文件，壓縮后，放到j(luò)s_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'); // 是否調(diào)用插件功能 //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一般，當(dāng)然，這根寫的代碼有關(guān)系。
新聞熱點
疑難解答
