什麼是Grunt？

  grunt是javascript專案構建工具，在grunt流行之前，前端專案的構建打包大多數使用ant。(ant具體使用 可以google)，但ant對於前端而言，存在不友好，執行效率低，學習成本高的問題。所以最近幾年對於前端構建工具--grunt就應運而生。

 Grunt能做什麼呢？

 按任務目標大致可分為四類：

1. 檔案操作型：比如合併、壓縮js和css檔案等（包括）。

  2. 預編譯型：比如編譯less、sass、coffeescript等。

  3. 類庫專案構建型：比如 angular、ember、backbone等.

  4. 工程質量保障型：比如jshint、jasmine、mocha等.

 下面我們最主要來講下 第一種(檔案合併與壓縮)。因為不管什麼專案在上線之前都要對檔案壓縮 或者 有合併的檔案要合併，也就是說減少請求數和程式碼體積減少，提高前端效能方面。 在學習grunt之前 我們都知道grunt依賴於nodeJS平臺。也就是說我們要安裝grunt 必須先安裝nodeJS環境和NPM環境。

 1.nodeJS的安裝

   由於我目前做的專案都是基於window下的 所以我這邊講的都是基於windows下的安裝，如果想要了解linux或者unix環境下安裝 可以google下。

   我這邊只講下普通安裝方法。其實就是最簡單的方法了，對於大多Windows使用者而言，都是不太喜歡折騰的人，你可以從這裡（

  然後再命令列中直接執行如下命令即可：

 打印出版本號 說明已經安裝好了。該引導步驟會將node.exe檔案安裝到C:\Program Files (x86)\nodejs\目錄下，並將該目錄新增進PATH環境變數。

2.NPM安裝

 1. 首先我們需要了解的是 什麼是NPM？NPM能做什麼？

    npm是node的包管理器，我們在開發nodejs應用程式的過程中，可能需要依賴許許多多的第三方模組以提高開發效率，那麼此時，我們就需要npm來輔助安裝所需package。

2. 按照步驟如下：

  2. 將npm原始碼解壓到比如D:\npm目錄中。

 3. 執行命令 進入npm檔案中 執行如下命令：

 出現如上面資訊 說明npm已經按照好了。

 3.Grunt的安裝

   特別留意下grunt是有二個版本：伺服器端版本（grunt）和客戶端版本（grunt-cli），我們需要安裝的是客戶端版本。如果我們現在已經安裝了伺服器版本的話，我們可以解除安裝掉：如下命令就ok  npm uninstall -g grunt 。

  客戶端安裝命令npm install -g grunt-cli 如下圖所示：

 出現如上顯示 說明也已經安裝好了！其中 -g安裝全域性NodeJs模組。下面我們需要package.json檔案。

 package.json檔案

假設你有個工程目錄叫nodejsDemo，在工程根目錄放個package.json.

package.json是npm的包配置檔案，package.json用於配置你需要拉取的grunt外掛資訊，比如下面的程式碼：

{
    "name": "gruntJs",
    "version": "1.0.0",
    "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-concat": "~0.1.1" 
    }
}

但是要提醒下大家 package.json 中 devDependencies 內部的版本一定要對應，剛開始配置時候 一直配置不上 報錯 有可能是版本的問題 所以安裝我上面的版本來是ok的。

     留意devDependencies欄位，定義你要拉取的依賴模組，上面的程式碼，拉取grunt-contrib-uglify外掛（用於壓縮js）及grunt-contrib-concat 外掛(用於合併檔案)，欄位的值~0.1.1，指明需要模組的版本號，“~”是至少的意思。

   在工程根目錄啟動命令列工具，執行npm install 如下圖所示：

 出現如上面資訊 也說明已經配置成功了，依賴拉取成功後，在nodejsDemo工程中生成了node_modules目錄，該目錄就包含了如下幾個檔案：

到此 準備工作已經ok了！接下來我們需要Gruntfile.js配置。

 Gruntfile.js配置

 1. 先在工程目錄nodejsDemo下 建立一個資料夾src 用於存放所有的js檔案。裡面目前包含2個js檔案 grunt.js 和bb.js 現在我需要的是對src目錄下的grunt.js和bb.js進行壓縮與合併操作。

 2. 接下來我要在工程目錄nodejsDemo建立一個Gruntfile.js 內容程式碼如下：

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat: {
              domop: {
                  src: ['src/grunt.js', 'src/bb.js'],
                  dest: 'dest/domop.js'
              }
          },
          uglify: {
              build: {
                  src : 'dest/domop.js',
                  dest : 'dest/domop-min.js'
              }
          }
      });

      // 載入concat和uglify外掛，分別對於合併和壓縮
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-uglify');

      // 註冊任務
      grunt.registerTask('default', ['concat','uglify']);
  };

 說明有concat是合併的意思 他的意思是指src資料夾下的grunt.js和bb.js 先合併到dest資料夾下的domop.js中。然後接著壓縮 壓縮檔案為domop-min.js。

 接下來我們只需要執行如下命令即可：

 如上所示：說明已經完成合並與壓縮操作了。 我們可以在根目錄看到 動態生成了資料夾 dest 然後在裡面有2個檔案 如下：

說明一切都ok了！

 接下來我們來重點看下Gruntfile.js程式碼的含義。

  所有grunt的程式碼，必須放在module.exports函式內，引數grunt為grunt物件，當你執行命令grunt時，grunt系統會去讀此函式的grunt構建配置。

 grunt.initConfig(obj)

  initConfig用於配置構建資訊，第一個引數必須是個object。

// 構建任務配置
grunt.initConfig({
 
});

 grunt.file.readJSON(path)

讀取一個json檔案，通常我們會把構建任務的基本配置寫在獨立的json檔案內，方便我們修改。

// 構建任務配置
grunt.initConfig({
    //讀取package.json的內容，形成個json資料
    pkg: grunt.file.readJSON('package.json')
});

grunt.loadNpmTasks(pluginName).

 載入指定外掛任務.

grunt.registerTask(taskName,taskArray)

 註冊任務，比如下面的程式碼：

 grunt.registerTask('default', ['concat','uglify']);

註冊預設執行的任務，即你執行grunt命令時，觸發的任務構建。 第二個引數為任務目標名，在initConfig()中配置：

// 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat: {
              domop: {
                  src: ['src/grunt.js', 'src/bb.js'],
                  dest: 'dest/domop.js'
              }
          },
          uglify: {
              build: {
                  src : 'dest/domop.js',
                  dest : 'dest/domop-min.js'
              }
          }
      });

檔案的簡單正則匹配語法

檔名（目錄路徑）的匹配，基本上和ant一樣。

   1. * 指匹配除了/外的任意數量的字元，比如foo/*.js.

   2. ? 指匹配除了/外的單個字元.

   3. ** 指匹配包含/的任意數量的字元，比如foo/**/*.js.

   4. ! 指排除指定檔案，比如src: ['foo/*.js', '!foo/bar.js']。

   5. {} 可以理解為“or”表示式，比如src: 'foo/{a,b}*.js' 。