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 theworks
grunt lint qunit concat min

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

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

  下面三條命令是等價的:

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

您可能感興趣的相關文章

 

本文鏈接:JavaScript 項目構建工具 Grunt 實踐:任務和指令

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM