Grunt 是一個基於任務的 JavaScript 項目命令行構建工具,運行於 Node.js 平台。Grunt 能夠從模板快速創建項目,合併、壓縮和校驗 CSS & JS 文件,運行單元測試以及運行靜態服務器。上一篇文章《JavaScript 項目構建工具 Grunt 實踐:安裝和創建項目框架》介紹了 Grunt 安裝和創建項目框架步驟,這篇文章介紹 Grunt 中的任務和指令。

Grunt 內置下面六種基本的任務:
- ✓ init - 從模板生成項目框架
- ✓ concat - 合併文件
- ✓ lint - 使用 JSHint 校驗代碼
- ✓ min - 使用 UglifyJS 壓縮代碼
- ✓ quint - 運行 Qunit 單元測試(依賴 PhantomJS)
- ✓ server - 啟動靜態服務器
任務按使用方式可以分為別名任務、多任務和自定義任務。
一、別名任務
基本語法:
1 |
grunt.registerTask(taskName, [description, ] taskList); |
taskName:任務別名,descripation:任務描述,taskList:任務列表。
使用示例:
1 |
grunt.registerTask( 'theworks' , 'lint qunit concat min' ); |
這樣定義以後,下面兩條命令是等價的:
2 |
grunt lint qunit concat min |
如果別名是 "default",那麼命令還可以更簡單,只需要輸入 grunt 就可以了。
1 |
grunt.registerTask( 'default' , 'lint qunit concat min' ); |
下面三條命令是等價的:
3 |
grunt lint qunit concat min |
二、多任務
多任務是在如果沒有指定任務目標的時候隱式地遍歷所有的目標。例如下面的配置,運行 grunt lint:test 或者是 grunt lint:lib 都是校驗特定的目錄下的 JavaScript 文件,如果是運行 grunt lint 則是自動運行 test、lib 和 grunt 三個目標。
三、自定義任務
如果你的任務不遵循多任務模式,可以自定義任務:
1 |
grunt.registerTask( 'default' , 'My "default" task description.' , function () { |
2 |
grunt.log.writeln( 'Currently running the "default" task.' ); |
在任務里還可以嵌套其它任務:
1 |
grunt.registerTask( 'foo' , 'My "foo" task.' , function () { |
3 |
grunt.task.run( 'bar baz' ); |
5 |
grunt.task.run([ 'bar' , 'baz' ]); |
甚至運行異步任務:
01 |
grunt.registerTask( 'asyncfoo' , 'My "asyncfoo" task.' , function () { |
03 |
var done = this .async(); |
05 |
grunt.log.writeln( 'Processing task...' ); |
07 |
setTimeout( function () { |
08 |
grunt.log.writeln( 'All done!' ); |
Grunt 內置下面五種指令:
<config:prop.subprop>
用於擴展 prop.subprop 配置屬性的值。
<json:file.json>
用於調用通過 grunt.file.parseJSON 從 file.json 解析出來的對象。
<banner:prop.subprop>
用於訪問 prop.subprop 參數屬性,通過 grunt.template.process 解析。
<file_strip_banner:file.js>
用於引入將要嵌入注釋的腳本文件
<file_template:file.js>
用於引入模板文件,通過 grunt.template.process 解析。