js模組化開發—Gruntfile.js詳解

一、grunt模組簡介

#grunt插件，是一種npm環境下的自動化工具。對於需要重複重複的任務，例如壓縮、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。 grunt模組根據Gruntfile.js檔案中的配置進行任務。
如果在package.json中定義以下指令：

【相關課程推薦：JavaScript影片教學】  

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

因為執行npm run build會先安裝devDependencies中定義的一些模組，則執行npm run build這個指令相當於做如下動作：

● npm install grunt-cli -g

#● npm install

● grunt

二、gruntfile.js的結構：

● "wrapper" 函數

● 專案與任務配置

● 載入grunt 外掛程式與任務

● 自訂任務

三、"wrapper" 函數

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

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

四、專案和任務配置

大部分的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: ''  //用模板字符串匹配hello
    },
    srcs: ['1.txt', '2.txt']
  }
});

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

grunt.config("proj.name");

另外，grunt任務模組會自動根據任務名稱來提取配置物件中和任務名稱對應的屬性，例如定義任務hello，則在配置物件對應的屬性"hello"中配置任務執行函數中所需用到的配置和資料。

五、載入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

六、自訂任務

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方法来检查其前置任务是否已经执行，并且没有失败。

5.任务中检查配置属性

可以用方法grunt.task.requiresConfig指定一个或者多个字符串或者数组的配置属性为必需的。如果一个或多个必需的配置属性缺失，就通知系统当前任务失败。

本文来自 js教程 栏目，欢迎学习！  

以上是js模組化開發—Gruntfile.js詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！