什麼是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使用者而言，都是不太喜歡折騰的人，你可以從這裡（http://nodejs.org/dist/v0.6.1/node-v0.6.1.msi ）直接下載到Node.js編譯好的msi檔案。然後雙擊即可在程式的引導下完成安裝。
然後再命令列中直接執行如下命令即可：
列印出版本號 說明已經安裝好了。該引導步驟會將node.exe檔案安裝到C:\Program Files (x86)\nodejs\目錄下，並將該目錄新增進PATH環境變數。
2.NPM安裝
1. 首先我們需要了解的是 什麼是NPM？NPM能做什麼？
npm是node的包管理器，我們在開發nodejs應用程式的過程中，可能需要依賴許許多多的第三方模組以提高開發效率，那麼此時，我們就需要npm來輔助安裝所需package。
2. 按照步驟如下：
1. 下載npm源碼 https://github.com/isaacs/npm/tags
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' 。