Javascript模塊化開發2——Gruntfile.js詳解

1、grunt模塊簡介

grunt插件，是一種npm環境下的自動化工具。對於須要反覆重複的任務，例如壓縮、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。grunt模塊根據Gruntfile.js文件中的配置進行任務。
若是在package.json中定義以下命令：

"scripts": {
    "build": "npm install && grunt"
}

由於運行npm run build會先安裝devDependencies中定義的一些模塊，則運行npm run build這個命令至關於作以下操做：

• npm install grunt-cli -g
• npm install
• grunt

2、gruntfile.js的結構：

• "wrapper" 函數
• 項目和任務配置
• 加載 grunt 插件和任務
• 自定義任務

3、"wrapper" 函數

每一份 Gruntfile.js（和grunt插件）都遵循一樣的格式，你所書寫的Grunt代碼必須放在此函數內：

module.exports = function(grunt){
         //do grunt-related things in here
}

4、項目和任務配置

大部分的Grunt任務都依賴某些配置數據，咱們經過grunt.initConfig 方法來配置Grunt任務的參數。
grunt.initConfig 方法的參數是一個JSON對象，你能夠在這個配置對象中存儲任意的數據。此外，因爲這自己就是JavaScript，你還能夠在這裏使用任意的有效的JS代碼。甚至你能夠用<% %>模板字符串來引用已經配置過的屬性，例如：

// 項目和任務配置
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'), //獲取 package.json 中的元數據(js代碼)
  proj:{
    name:'hello',
    description:'a hello demo'
  },
  hello: {
    options: {
      name: '<%= proj.name %>'  //用<% %>模板字符串匹配hello
    },
    srcs: ['1.txt', '2.txt']
  }
});

在grunt.initConfig 方法中配置的屬性，在任務模塊中，可用grunt.config方法進行訪問，例如：

grunt.config("proj.name");

另外，grunt任務模塊會自動根據任務名來提取配置對象中和任務名對應的屬性，好比定義任務hello，則在配置對象對應的屬性"hello"中配置任務執行函數中所需用到的配置和數據。

5、加載grunt插件任務

爲了減小重複勞動，咱們能夠加載已有的插件任務。

1.加載本身私有的grunt插件

可將本身定義的一些task腳本放在同一個目錄下，經過grunt.loadTasks方法從指定目錄加載該目錄下全部的grunt任務腳本。

2.加載在npm中發佈的grunt插件

像 grunt-contrib-copy和grunt-contrib-uglify這些經常使用的任務都已經以grunt插件的形式被開發出來了，且被髮布在npm公開庫中，只要在 package.json 文件中將須要使用的插件列在dependency中，並經過npm install安裝以後，就能夠直接加載該任務。

// 加載可以提供"copy"任務的插件。
grunt.loadNpmTasks('grunt-contrib-copy');

3.直接加載全部以"grunt-"打頭的插件

npm上有個load-grunt-tasks插件能夠用來加載dependency列表中全部以"grunt-"打頭的插件。
將須要使用的"grunt-"打頭的插件列在dependency中，而後在Gruntfile.js中進行調用。

//Load grunt tasks from NPM packages
load-grunt-tasks

6、自定義任務

1.直接定義任務的行爲

grunt.registerTask('hello', 'Show some msg', function() {
  console.log(this.options().name); //輸出hello
});

2.定義爲任務列表

能夠將一個任務定義爲一系列任務的組合，這一系列任務將按照順序執行。

grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);

3.定義默認任務

經過定義 default 任務，可讓Grunt默認執行一個或多個任務。執行 grunt 命令時若是不指定一個任務的話，將會執行默認任務。如進行下面定義的話執行grunt 至關於執行grunt hello。

grunt.registerTask('default', ['hello']);

4.定義複合任務

registerMultiTask方法能夠定義一個複合任務，複合任務將會對grunt.initConfig 方法中配置的相應屬性中除了options外定義的屬性依次做爲target:data對進行處理。

module.exports = function(grunt) {
    grunt.initConfig({
        Log: {
            options: {
                sep: ';'
            },
            srcs: ['1.txt', '2.txt'],
            dests: ['d1.txt', 'd2.txt']
        }
    });
    grunt.registerMultiTask("Log", function() {
        var options = this.options({ sep: '&' });
        console.log(this.target); 
        console.log(this.data.join(options.sep));
    });
};

執行grunt Log將會輸出：

Running "Log:srcs" (Log) task
srcs
1.txt;2.txt
Running "Log:dests" (Log) task
dests
d1.txt;d2.txt

定義任務行爲Tips

1.任務內部能夠執行其餘的任務。

grunt.registerTask('mytask', function() {
  grunt.task.run('task1', 'task2');
  // Or:
  grunt.task.run(['task1', 'task2']);
});

2.定義異步任務

grunt.registerTask('mytask', function() {
  var done = this.async();
  //do something
  done();
});

3.當任務失敗時，全部後續任務都將終止

在任務中，當執行失敗，能夠return false來代表當前任務執行失敗，通常，多個任務按順序執行，若是有任務失敗時，全部後續任務都將終止。能夠經過在命令行後加上--force來使有任務失敗時，後續任務能繼續進行。

4.任務中檢查前置任務狀態

有些任務能夠依賴於其餘任務的成功執行。經過grunt.task.requires方法來檢查其前置任務是否已經執行，而且沒有失敗。