JavaScript 項目構建工具 Grunt 實踐：任務和指令

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

 

 

Grunt 任務

　　Grunt 內建下面六種基本的任務：

• ✓  init - 從模板產生項目架構
• ✓  concat - 合并檔案
• ✓  lint - 使用 JSHint 校正代碼
• ✓  min - 使用 UglifyJS 壓縮代碼
• ✓  quint - 運行 Qunit 單元測試（依賴 PhantomJS）
• ✓  server - 啟動靜態伺服器

　　任務按使用方式可以分為別名工作、多任務和自訂任務。

　　一、別名工作

　　基本文法：

grunt.registerTask(taskName, [description, ] taskList);

　　taskName：任務別名，descripation：任務描述，taskList：工作清單。

　　使用樣本：

grunt.registerTask('theworks', 'lint qunit concat min');

　　這樣定義以後，下面兩條命令是等價的：

grunt theworksgrunt lint qunit concat min

　　如果別名是 "default"，那麼命令還可以更簡單，只需要輸入 grunt 就可以了。

grunt.registerTask('default', 'lint qunit concat min');

　　下面三條命令是等價的：

gruntgrunt defaultgrunt lint qunit concat min

　　二、多任務

　　多任務是在如果沒有指定任務目標的時候隱式地遍曆所有的目標。例如下面的配置，運行 grunt lint:test 或者是 grunt lint:lib 都是校正特定的目錄下的 JavaScript 檔案，如果是運行 grunt lint 則是自動運行 test、lib 和 grunt 三個目標。

/*global config:true, task:true*/grunt.initConfig({  lint: {    test: ['test/*.js'],    lib: ['lib/*.js'],    grunt: ['grunt.js']  }});

　　三、自訂任務

　　如果你的任務不遵循多任務模式，可以自訂任務：

grunt.registerTask('default', 'My "default" task description.', function() {  grunt.log.writeln('Currently running the "default" task.');});

　　在任務裡還可以嵌套其它任務：

grunt.registerTask('foo', 'My "foo" task.', function() {  // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.  grunt.task.run('bar baz');  // Or:  grunt.task.run(['bar', 'baz']);});

　　甚至運行非同步任務：

grunt.registerTask('asyncfoo', 'My "asyncfoo" task.', function() {  // Force task into async mode and grab a handle to the "done" function.  var done = this.async();  // Run some sync stuff.  grunt.log.writeln('Processing task...');  // And some async stuff.  setTimeout(function() {    grunt.log.writeln('All done!');    done();  }, 1000);});

Grunt 指令

　　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 解析。

您可能感興趣的相關文章

• 經典的白富美型 jQuery 圖片輪播外掛程式
• 精心挑選的優秀 jQuery Ajax 分頁外掛程式
• 十款精心挑選的線上CSS3代碼產生工具
• 讓人愛不釋手的13套精美網頁表徵圖素材
• 10套精美的免費網站後台管理系統模板

 

本文連結：JavaScript 項目構建工具 Grunt 實踐：任務和指令

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源