Grunt 系列1 基礎教學
Grunt 入門
Grunt 和 Grunt 擴充套件 都是透過 npm 來安裝和管理。Grunt 這個工具大概就等於 Ruby 中的 rake ，它可以透過一些設定讓你輕鬆完成一些例行性的任務，例如壓縮檔案，編譯 coffee less，搬移到目標目錄，單元測試等等。之後就可以透過一個指令，就把所有的事情做好。
安裝
為了能夠使用 Grunt 你必須安裝 grunt-cli 就是 Grunt 的 Command Line Interface 到您的系統。
安裝過程可能會需要 sudo 或這在 windows 底下使用管理者身份執行。
npm install -g grunt-cli
在 npm 使用 -g 就會把該套件裝至系統路徑，這樣您就可以在任何目錄使用 grunt-cli
注意：安裝了 grunt-cli 並不是安裝 Grunt task runner。 grunt-cli 本身的任務非常單純，他就只是使用你已經安裝的 Grunt 版本去執行 Gruntfile.js。這樣你就可以在同一台機器，運行不同版本的 grunt 了。
CLI如何運作
每一次執行 grunt，他會用require()去引入本地的 grunt，注意不是 cli。也因次你可以在不同專案目錄底下運行不同版本的 grunt。
一旦 grunt 被載入了，接著就會載入 Gruntfile 然後根據裡面的設定去運行任務。
如果你想理解原理可以閱讀程式碼 https://github.com/gruntjs/grunt-cli/blob/master/bin/grunt
如何使用已經存在的 Grunt 專案
假如您的 cli 已經安裝了，並且有一個專案也已經設定好 package.json 和 Gruntfile.js。那你可以非常輕鬆地就開始使用 grunt
- 切換到專案的根目錄
- 使用
npm install安裝相依的套件。 - 執行
grunt就可以開始跑了。
如果你想瞭解更多關於 grunt 的命令，你可以使用 grunt --help 會列出例如：clean, coffee。這些都是靠 Grunfile 定義的。
預設是空的沒有任何任務
Sails 建立的 Gruntfile
建立一個新的 Grunt 專案
要建立一個 Grunt 專案涉及到最重要的兩個檔案的建立 package.json 和 Gruntfile.js。
-
package.json: 這是npm用來儲存 matadata 的檔案，簡單說就是 npm 對於這個專案相關的設定擋。包含相依的套件，一旦在這邊設定，您就可以透過npm install來安裝相依的套件。一般在使用時，我們也會用npm install --save在安裝後順便把設定加到package.json。你也會在這個檔案設定 grunt 和 grunt 套件相依的一些函式庫或元件。通常會像下面程式碼片段，指的是開發階段使用的套件。"devDependencies": { "mocha": "*", "request": "*", "wrench": "~1.5.1" } Gruntfile: 這個檔案通常會是Gruntfile.js或者Gruntfile.coffee他被用來設定任務，載入外掛。
package.json
package.json 通常和 Gruntfile 都在專案的根目錄。而且必須和你的專案一起被送交。在根目錄下 npm install 就會根據 package.json 去安裝相依的套件。而且還能指定版本。下面提供一些簡單的方式快速建立 package.json
大部份的 grunt-init 模版都會自動建立 package.json。而 grunt-init 這個指令是需要在安裝的。
npm init直接執行 npm init 就會一步一步詢問你相關的參數，協助您建立 package.json-
手動建立
{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } }
安裝 Grunt 和 Grunt 套件
安裝 Grunt 和 Grunt 套件並且加入 package.json 最簡單的方式就是執行 npm install <module> --save-dev
它不只會安裝該套件模組還會新增或更新 package.json 。
範例：
npm install grunt --save-dev
/* 測試透過 npm 安裝同一個套件，不同版本*/
npm install jquery@1.7.2 --save-dev
npm install jquery@1.8.3 --save-dev
Gruntfile
Gruntfile.js 或 Gruntfile.coffee 都必須是合法正確的 javascript 或 coffee 。他們通常放在專案的根目錄下。跟 package.json 同一層，也一樣必須要被提交。
一個 Gruntfile 包含下面這幾個部分：
- 把所有動作包起來的 function
- 專案和任務的設定
- 載入的 Grunt 套件和任務(別人已經寫好的)
- 自訂的任務
Gruntfile 範例
在下面的範例中，關於 project 的 metadata 等資料是透過讀取 package.json 取得，並在 grunt 中使用。
使用 grunt-contrib-uglify 套件的uglify任務是用來設定壓縮檔案並根據專案的 metadata 產生一些註解。當 grunt 開始執行，預設就會執行 uglify 任務
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
整個 Gruntfile 大致上就如上面這樣，後續我們將一步一步介紹每個組成部份。
The "wrapper" function (把所有動作包起來的 function)
每一個 Gruntfile 或者 Grunt 套件都使用這個基本的定義格式，而你所有要讓 Grunt 執行的程式碼都必須被包在這個 function 中。
module.exports = function(grunt){
// Do grunt-related things in here
}
專案和任務設定
絕大多數的 Grunt 任務都透過定義一個包含所有設定資料的物件，然後把物件傳給 grunt.initConfig 方法來設定的。
在上面的範例中，grunt.file.readJSON('package.json') 匯入了一個 JSON 格式的檔案，JSON 讀取至 javascript 中便是一個 object。接著在 Gruntfile 中可以使用 <% %> 這樣的語法，中間可以帶入其他設定的屬性，例如檔案路徑。
你可能會隨便存一些資料到設定裡面，只要屬性不要衝突即可，否則會被忽略。這其實也是因為在 Javascript 中，你不能去限制 JSON
就像大部份的任務，grunt-contrib-uglify 的 uglify 任務預計會在同名的屬性中取得設定，在下面的範例中，我們在 options 設定了 banner，然後設定了 build 裡面指定了 src 和 dest 。整段範例的意思就是取得 package.json 中的 name ，接著去 src 目錄中取得 name.js 檔案並且把它壓縮成 name.min.js 。到這邊為止的 code 都只是設定而已。
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
載入 Grunt 和 Grunt 套件
大部份的任務例如串聯檔案，壓縮，都已經有現成的套件可以使用了，只要在 package.json 中設定並安裝，就可以使用。
安裝完之後，就是在 Gruntfile 中載入
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
載入之後透過 grunt --help 就可以列出目前可以執行的任務，注意：initConfig 是在 grunt 初始化時針對任務做一些設定。於是真正在執行的時候就會去套用設定，例如上面我們載入了 grunt-contrib-uglify，之後我們就可以下達指令：grunt uglify。就會照著我們設定的把一支跟專案名稱一樣的 .js 壓縮成 .min.js。
自訂任務
您可以在預設就讓 grunt 執行多個任務，只要透過 default 設定，接著我們執行 grunt 的時候就會照著預設任務去執行。如下範例，我們把 uglify 註冊到 default 。這樣我們就不用特別單獨執行 grunt uglify ，只要執行 grunt 或者 grunt default 就會執行下面壓縮檔案的這個任務。需要指定的任務可以加入下面程式碼 ['uglify'] 中的這個陣列。它可以執行多個任務。
// Default task(s).
grunt.registerTask('default', ['uglify']);
不過如果你想要執行的任務或需求並沒有任何 Grunt 套件，您也可以自訂在 Gruntfile 裡面
module.exports = function(grunt) {
// A very basic default task.
grunt.registerTask('default', 'Log some stuff.', function() {
grunt.log.write('Logging some stuff...').ok();
});
};
以上我們就完成了 Grunt 入門的使用了
