什么是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' 。