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