scales小談grunt

Grunt是基於Node.js的項目構建工具。它能夠自動運行你所設定的任務。Grunt擁有數量龐大的插件,幾乎任何你所要作的事情均可以用Grunt實現。

一頭野豬映入眼簾，意：咕嚕聲

中文網站：http://www.gruntjs.net/

英文網站：http://gruntjs.com/

爲什麼要用構建工具？

一句話：自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。

爲何要使用Grunt？

Grunt生態系統很是龐大，而且一直在增加。因爲擁有數量龐大的插件可供選擇，所以，你能夠利用Grunt自動完成任何事，而且花費最少的代價。若是找不到你所須要的插件，那就本身動手創造一個Grunt插件，而後將其發佈到npm上吧。

安裝grunt：

首先安裝node，http://nodejs.cn/

經過node安裝grunt,命令：（windows在cmd中,Linux\Mac在命令行中）

安裝grunt命令行grunt-cli(npm install -g grunt-cli),該步全局安裝。

添加package.json文件（npm init）

安裝grunt(npm install grunt --save-dev)(要經過命令行切換到項目目錄後在執行上訴兩步操做,--save-dev是將包依賴到項目開發環境中，--save是將包依賴到項目生產環境中)

安裝好後會發如今項目目錄多了 package.json文件，以及node_modules 文件夾，以下：

package.json文件：聲明模塊用的，鍵值對的形式，包名和版本號會存放其中

node_modules:存放包的文件夾（如grunt、gulp、bower、yeoman等）

實戰:

安裝 load-grunt-tasks (npm install load-grunt-tasks  --save-dev)

安裝 time-grunt (npm install time-grunt  --save-dev)

安裝 time-grunt (npm install grunt-contrib-copy  --save-dev)

安裝 time-grunt (npm install grunt-contrib-clean --save-dev)

建立gruntfile.js,該文件用於自動化構建功能的設置：

下面咱們來實現將文件拷入目標目錄，和從目標目錄中清除

在項目目錄下創建源文件目錄app, 目錄裏存放js文件夾和index.html, js文件夾內存放index.js 文件， 結構以下

設置 gruntfile.js 文件：

 1 'use strict'; //使用ES5嚴格方式
 2   
 3  module.exports = function(grunt){
 4      require('load-grunt-tasks')(grunt);
 5      require('time-grunt')(grunt);
 6 
 7       var config = {
 8           app: 'app',
 9           dist: 'dist'
10      }
11  
12      grunt.initConfig({
13         config: config,
14          copy: {                                       //拷貝
15              dist: {
16                  src:'<%= config.app %>/index.html',   //源文件
17                  dest: '<%= config.dist %>/index.html' //目標文件
18              }
19          },
20          clean: {                                      //清除
21              dist: {
22                  src: '<%= config.dist %>/index.html'  //目標文件
23              }
24          }
25          })
26  }

這樣就實現了將源文件拷到目標目錄，亦可清除

 1 copy: {
 2             dist_html: {
 3                  src:'<%= config.app %>/index.html',
 4                  dest: '<%= config.dist %>/index.html'
 5              },
 6              dist_js: {
 7                  src:'<%= config.app %>/js/index.js',
 8                  dest: '<%= config.dist %>/js/index.js'
 9              }
10          },
11          clean: {
12              dist: {
13                  src: ['<%= config.dist %>/index.html', '<%= config.dist %>/js/index.js']
14              }
15          }

將js文件一塊兒拷貝，清除操做，注意src的值能夠寫成數組的形式

 1 copy: {
 2              dist: {
 3                  files:[
 4                      {
 5                          src:'<%= config.app %>/index.html',
 6                          dest: '<%= config.dist %>/index.html'
 7                      },
 8                      {
 9                          src:'<%= config.app %>/js/index.js',
10                          dest: '<%= config.dist %>/js/index.js'
11                      }
12                  ]
13              }
14      },

拷貝部分能夠這樣寫，以數組的形式，裏面放入obj鍵值對

還能夠這樣寫，更加簡便，以下：

1 copy: {
2             dist: {
3                  files:{
4                      '<%= config.dist %>/index.html': '<%= config.app %>/index.html',
5                  
6                      '<%= config.dist %>/js/index.js': ['<%= config.app %>/js/index.js']
7                      }
8              }
9     },

直接寫成obj鍵值對，源文件做爲值，固然能夠將其寫成數組的形式，以便處理多個源文件

清除操做能夠批量處理，以下，經過通配符，進行批量操做：

還能夠添加參數，設置只清除文件（isFile）\只清除目錄（isDirectory）,這些值到node官網便可找到（找stats關鍵詞）

1 clean: {
2            dist: {
3                  src: '<%= config.dist %>/**/*'
4             }
5          }

1 clean: {
2            dist: {
3                src: '<%= config.dist %>/**/*',
4                filter: 'isFile'
5           }
6         }

 還能夠自定義方法：意思是不刪除目錄（！表明否）

1 clean: {
2             dist: {
3               src: '<%= config.dist %>/**/*',
4               filter: function(filepath){
5                    return (!grunt.file.isDir(filepath))
6                }
7            }
8        }

動態拷貝文件：

copy: {
             dist: {
               files:[
                  {
                       expand: true,　　             //動態拷貝文件
                       cwd: '<%= config.app %>/',   //源文件目錄
                       src: '*.html',               //源文件
                       dest: '<%= config.dist %>/', //目標文件目錄
                       ext: '.min.html'             //添加後綴
                       extDot: 'first',             //找第一個點加後綴
                       flatten: true,               //去掉中間各層目錄，直接拷貝
                       rename: function(dest, src){ //將中間目錄加回來 
      　　　　　　　　　　　 return dest + 'js/' +src;
     　　　　　　　　　　　 }

                   }    
            ]
       }
     },

以上即是grunt實現的源文件拷貝到目標目錄，以及從目標目錄清除的操做。（還包括添加後綴，去掉中間目錄的一些小操做）