本文章是關於搭建和安裝grunt前端。言簡意賅分爲以下幾步，按步驟操作可搭建一個簡單的前端框架。以後再開發前端的時候，可以再根據實際項目需求，逐漸完善和增加相關插件和環境，這裏就不多做論述了。本隨筆若有錯誤之處歡迎指正，也歡迎各位同行一起交流成長。
一.安裝nodejs
在下載nodejs時候，應注意：1.最新版本的儘量別用，2.奇數版本號的版本被認爲是不穩定的開發版，不過從官網上下載下來的應該都是偶數的穩定版。
本例子，nodejs的版本爲：node-v4.4.5-x64
安裝時，點擊下一步到底即可。
安裝完成後，在制臺中輸入“node -v”來查看nodejs的版本，也順便試驗nodejs是否安裝成功。
二.安裝grunt-CLI
“CLI”：翻譯爲“命令行”。
在控制檯輸入：
1.windows系統：
npm install -g grunt-cli
2.mac os 系統、部分linux系統：
sudu npm install -g grunt-cli
驗證一下grunt-cli是否安裝完成並生效，在命令行中輸入“grunt”命令即可。生效則會出現以下結果：
三.搭建一個項目
新建一個“template”的文件夾，在裏面創建dist和src的文件夾，src爲項目內容，dist爲壓縮合並轉譯等處理過後的文件夾，在src裏面建立css，js文件夾，裏面對應放入相應的文件夾和文件。
在根目錄創建一個package.json文件。
在裏面寫入如下代碼：
{
"name": "template",
"version": "1.0.0",
"devDependencies": {
}
}
最後一個“devDependencies”爲“開發依賴項”，即我們現在這個系統，將會依賴於哪些工具來開發，目前爲空對象，在之後的操作中，隨着安裝的進行，會逐漸填充起來的。
四. 安裝grunt
以上的幾步，安裝grunt-CLI都是在全局安裝的，這裏我們要安裝grunt 則是在項目文件下安裝的，這裏我們要在控制檯中跳轉到項目文件目錄下，這裏我的項目文件的地址爲 D:\template，在控制檯輸入d：再輸入 cd
template 。。
然後再項目文件目錄下輸入：
npm install grunt --save-dev
“—save-dev”的意思是，在當前目錄安裝 grunt 的同時，順便把 grunt 保存爲這個目錄的開發依賴項。由於grunt僅在開發階段使用，所以使用--save-dev。如果是運行時使用的，則用--save。
上文配置package.json時，其“devDependencies”的“devDependencies”中就會存儲開發依賴項。
在輸入npm install grunt --save-dev後：
並且，在項目文件下，多了一個“node_modules”文件夾。
在控制檯運行“grunt”命令。如果得到一個warning提示，那說明grunt已經起作用了。
五. 配置Gruntfile.js
在根目錄建立Gruntfile.js，裏面輸入如下代碼：
module.exports = function( grunt ) { grunt.initConfig( { /* 任務配置，所有插件的配置信息 */ pkg: grunt.file.readJSON( "package.json" ) } ); //告訴grunt當我們在終端中輸入grunt時需要做些什麼（注意先後順序） grunt.registerTask( 'default', [] ); };再運行一下grunt命令，如下圖，說明正確。
六. Grunt插件安裝和配置
插件安裝命令如下：
npm install grunt-contrib-jshint --save-dev --javascript語法錯誤檢查；
npm install grunt-contrib-csslint --save-dev --css語法錯誤檢查；
npm install grunt-contrib-uglify --save-dev --壓縮，合併javascript代碼；
npm install grunt-contrib-cssmin --save-dev --壓縮，合併css代碼；
npm install grunt-contrib-less --save-dev --把less轉換成css;
npm install grunt-contrib-concat --save-dev --合併多個文件的代碼到一個文件中；
npm install grunt-contrib-watch --save-dev --實時監控文件變化、調用相應的任務重新執行;
npm install grunt-contrib-newer --save-dev --文件更改後，增量更新，而不是對所有的文件去執行任務;
npm install grunt-contrib-copy --save-dev --複製文件、文件夾;
npm install grunt-contrib-clean --save-dev --清空文件、文件夾;
七. uglify插件安裝（壓縮javescript代碼）
控制檯中，在項目目錄下輸入： npm install grunt-contrib-uglify --save-dev
在項目文件喜愛src js 中建立一個text.js，輸入如下代碼，作爲測試js文件。
1、打開gruntfile.js，在grunt.initConfig方法中配置 uglify 的配置參數。如下圖：
/*======= 壓縮js，uglify插件的配置信息 =======*/ uglify: { options: { //在所有生成的文件上方加上 時間 banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, minjs: { files: [ { expand: true, // 啓用下面的選項 cwd: 'src/js/', // 指定待壓縮的文件路徑 src: [ '**/*.js', '!**/*.min.js' ], // 匹配相對於cwd目錄下的所有js文件(排除.min.js文件) dest: 'dist/js', // 生成的壓縮文件存放的路徑 ext: '.min.js' // 生成的文件都使用.min.css替換原有擴展名，生成文件存放於dest指定的目錄中 } ] }, /* 合併js */ merge: { files: { /* 合併指定目錄下 所有的js文件 */ 'dist/js/merge/all/all.js': [ 'dist/js/**/*.js'], //前者爲合併的路徑，後者爲對象路徑 /* 合併指定目錄下 特定的js文件 */ 'dist/js/merge/some/some.js': [ 'dist/js/jquery/*.js'] } } },2、在 grunt.initConfig 方法之後，要讓grunt去加載這一個插件,如下：
//告訴grunt我們將使用插件 grunt.loadNpmTasks( 'grunt-contrib-uglify' );3、在grunt命令執行時，要不要立即執行uglify插件？如果要，就寫上，否則不寫。
//告訴grunt當我們在終端中輸入grunt時需要做些什麼（注意先後順序） grunt.registerTask( 'default', [ 'uglify'] );當然了，也可以這麼寫，簡化一點：
//告訴grunt當我們在終端中輸入grunt時需要做些什麼 grunt.registerTask( 'default', [], function() { //告訴grunt我們將使用插件 grunt.loadNpmTasks( 'grunt-contrib-uglify' ); //需要執行哪些任務（注意先後順序） grunt.task.run( 'newer:uglify' ); } );至此前期工作都做好了，可以在控制檯輸入命令運行了，在控制檯輸入grunt
成功，如下圖：
八. cssmin插件安裝（壓縮css代碼）
控制檯中，在項目目錄下輸入： npm install
grunt-contrib-cssmin --save-dev
1、打開gruntfile.js，在grunt.initConfig方法中配置 cssmin 的配置參數。如下圖：
/*======= 壓縮css，cssmin插件的配置信息 =======*/ cssmin: { /*壓縮 CSS 文件爲 .min.css */ options: { keepSpecialComments: 0 /* 移除 CSS 文件中的所有註釋 */ }, /* 合併CSS */ merge:{ files:{ /* 合併指定目錄下 所有的CSS文件 */ 'src/css/merge/all/all.css':[ 'src/css/**/*.css', '!src/css/**/*.min.css'], /* 合併指定目錄下 特定的CSS文件 */ 'src/css/merge/some/some.css':['src/css/bootstrap/*.css', 'src/css/some.css', '!src/css/**/*.min.css'] } }, minify: { expand: true, // 啓用下面的選項 cwd: 'src/css/', // 指定待壓縮的文件路徑 src: [ '**/*.css', '!**/*.min.css' ], // 匹配相對於cwd目錄下的所有css文件(排除.min.css文件) dest: 'dist/css', // 生成的壓縮文件存放的路徑 ext: '.min.css' // 生成的文件都使用.min.css替換原有擴展名，生成文件存放於dest指定的目錄中 } },2、在 grunt.initConfig 方法之後，要讓grunt去加載這一個插件,如下：
//告訴grunt我們將使用插件 grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); grunt.loadNpmTasks( 'grunt-contrib-uglify' );
//告訴grunt當我們在終端中輸入grunt時需要做些什麼（注意先後順序） grunt.registerTask( 'default', ['cssmin','uglify'] );
至此前期工作都做好了，可以在控制檯輸入命令運行了，在控制檯輸入grunt
成功，如下圖：
九. watch插件安裝和配置
控制檯中，在項目目錄下輸入： npm install
grunt-contrib-watch --save-dev
這裏我們要注意下，一般 watch
最好要配合 newer 插件使用，因爲 watch 監聽相關文件變化而調用相應的插件執行，一般項目文件是非常龐大的，零零碎碎不少文件，可謂動一發而牽全身，每次文件改動，就執行watch，就要運行個幾秒鐘，若是電腦不好，內存2G甚至2G以下，則有可能出現幾十秒的時間，故而這裏我們要安裝newer插件，文件更改後，增量更新，而不是對所有的文件去執行任務。
1、打開gruntfile.js，在grunt.initConfig方法中配置 watch 的配置參數。如下圖：
/*======= 監控文件變化並執行相應任務 =======*/ watch: { /* 監聽當Gruntfile.js改變時，重新刷新加載 */ configFiles: { files: [ 'Gruntfile.js'], options: { reload: true } }, less: { files: [ 'src/css/less/*.less' ], //監聽的對象路徑 tasks: [ 'newer:less' ], //執行的事件 options: { spawn: false, debounceDelay:5000 //每次監聽的間隔時間 } }, css: { files: [ 'src/css/**/*.css' ], tasks: [ 'newer:cssmin' ], options: { spawn: false, debounceDelay:5000 } }, js: { files: [ 'src/js/**/*.js' ], tasks: [ 'newer:uglify' ], options: { spawn: false, debounceDelay:5000 } } }
這裏注意一下，這塊內容：
/* 監聽當Gruntfile.js改變時，重新刷新加載 */ configFiles: { files: [ 'Gruntfile.js'], options: { reload: true } },
這表示，當 gruntfile.js 配置文件發生變化的時候，watch 也可以監聽到，並根據更改內容，改變並且執行相關事件。
2、在 grunt.initConfig 方法之後，要讓grunt去加載這一個插件,如下：//告訴grunt我們將使用插件 grunt.loadNpmTasks( 'grunt-contrib-cssmin' ); grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-newer' );grunt.loadNpmTasks( 'grunt-contrib-watch' );
//告訴grunt當我們在終端中輸入grunt時需要做些什麼（注意先後順序） grunt.registerTask( 'default', ['cssmin','uglify'，watch’] );
在控制檯輸入命令運行了，在控制檯輸入grunt，可以開啓 watch 監聽，如下圖：
這裏我們隨便改動一下一個js文件裏面的內容，則會出現：
監聽對象一有改變，就能執行綁定事件，十分方便。
十. 批量安裝插件
在開發時候，如我本地搭建了前端的環境，其他同事沒有，不可能也不會把“node_modules”上傳到開發庫，其他一起開發的人，爲了得到這些grunt插件和工具，有2種方法：
1手動一個一個安裝，這是一個笨方法，其次如果我當年安裝的舊版本，而他們現在自己安裝的可能是新版本。新舊有可能不兼容。
2用此方法，批量安裝。
我們在把項目文件上傳服務器時，肯定會把根目錄的package.json上傳上去，而package.jso 的“devDependencies”就記錄了這個系統的開發依賴項，我們可以通過nodejs的npm即可批量安裝。
下面我們測試一下，在d盤中新建一個' template2 '文件，然後把“grunt_test”中的package.json拷過去。在打開命令行跳轉到“temple2” ，執行npm install
看看得到什麼結果。
整個過程相當於把所有插件下載了一遍，然後發現在項目文件中生成了node_modules文件。且安裝的版本和原版本都是一致的。
之後，只需把Gruntfile.js複製到項目文件下，根據項目要求做相應的改動即可。
十. 完結
本次操作只舉例了幾個插件的安裝，類似的jshint，csslint，以及concat就不做討論了，jshint配合watch可實時檢查js代碼的錯誤之處，十分強大，至於concat，則是合併js和css文件，應爲cssmin和uglify已經包含此功能，所以也就不需要了，其他還有許多插件，可以自行百度安裝，大同小異。
個人認爲，平時狀態下，jshint和cssmin插件安裝好，配置文件代碼可以先註釋掉，因爲每次watch監聽，可能會報一大堆錯誤，影響心情和效率，如果想實時更改可以開啓，我的建議是，要找錯，要測試再開啓。
目前前端glup自動化構建工具也不錯，和grunt相比各有千秋，後續也會寫一些glup的內容，再補上其他一些插件供給參考。
