Grunt 学习笔记【2】---- 配置和创建任务

本文主要讲Grunt任务配置。

说明：本文所有示例都基于Grunt 0.4.5版本。

一 说明

使用Grunt实现项目的打包等工程化工作，实际上是通过Grunt提供的机制和插件，配置一个个任务（例如：拷贝内容、混淆压缩、格式检查、清除等），当输入grunt命令时，就逐个执行配置好的任务，从而实现项目打包等工程化工作。

Grunt的任务配置都是在 Gruntfile.js文件 中的grunt.initConfig(configObj)参数configObj中指定的。如果你还不知道 Gruntfile.js 是什么，请先阅读 Grunt 学习笔记【1】----基础知识。

每个任务都是configObj的一个对象类型的属性，在这个属性中配置该任务的信息。

configObj中可以定义任何其它数据，但要注意，一旦这些代表任意数据的属性与任务所需要的属性相冲突，就将被忽略。

此外，由于这本身就是JavaScript，因此你不仅限于使用JSON；你可以在这里使用任何有效的JavaScript。必要的情况下，你甚至可以以编程的方式生成配置。

 grunt.initConfig({
   concat: {
     // 这里是concat任务的配置信息。
   },
   uglify: {
     // 这里是uglify任务的配置信息
   },
   // 任意数据。
   my_property: 'whatever',
   my_src_files: ['foo/*.js', 'bar/*.js'],
 });

二 配置任务信息

在grunt.initConfig(configObj)参数configObj中配置任务信息，每个任务都是configObj的一个对象类型的属性，在这个属性中配置该任务的信息。

当运行一个任务时，Grunt会自动查找配置对象configObj中的同名属性。

多任务（一种类型任务，但需要多次执行）可以通过任意命名的“目标（target）”来定义多个配置。在下面的案例中，concat类型的任务有名为foo和bar两个目标，而uglify任务仅仅只有一个名为bar目标。

 grunt.initConfig({
   concat: {
     foo: {
       // concat task "foo" target options and files go here.
     },
     bar: {
       // concat task "bar" target options and files go here.
     },
   },
   uglify: {
     bar: {
       // uglify task "bar" target options and files go here.
     },
   },
 });

同时指定任务（task）和目标（target），例如grunt concat:foo或者grunt concat:bar，将只会处理指定目标（target）的配置，而运行grunt concat将遍历所有目标（target）并依次处理。注意，如果一个任务使用grunt.task.renameTask重命名过，Grunt将在配置对象中查找以新的任务名命名的属性。

options属性：

在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的options将会覆盖任务级的options。

options对象是可选的，如果不需要，可以忽略。

 grunt.initConfig({
   concat: {
     options: {
       // 这里是任务级的Options，覆盖默认值
     },
     foo: {
       options: {
         // "foo" target options may go here, overriding task-level options.
       },
     },
     bar: {
       // No options specified; this target will use task-level options.
     },
   },
 });

指定任务处理的文件和输出的文件，有如下3种方式：

方式一：简洁格式

通过src和dest属性指定任务处理和输出的文件。通常情况下它用于只读任务，比如grunt-contrib-jshint，它就只需要一个单一的src属性，而不需要关联的dest选项。这种格式还支给每个src-dest文件映射指定额外的属性（例如：filter、nonull等）。

方式二：文件对象格式

通过files属性指定任务处理和输出的文件，files对象的属性名就是输出文件路径和文件名字符串，处理文件就是它的值(处理的文件列表则使用数组格式声明)。可以使用这种方式指定数个src-dest文件映射， 但是不能够给每个映射指定附加的属性。

方式三：文件数组格式

将files属性定义为数组，数组每个元素定义了处理和输出的文件。同时可以指定额外属性（例如：filter、nonull等）。

 // 方式一
 grunt.initConfig({
   jshint: {
     foo: {
       src: ['src/aa.js', 'src/aaa.js']
     },
   },
   concat: {
     bar: {
       src: ['src/bb.js', 'src/bbb.js'],
       dest: 'dest/b.js',
     },
   },
 });

// 方式二
grunt.initConfig({
  concat: {
    foo: {
      files: {
        'dest/a.js': ['src/aa.js', 'src/aaa.js'],
        'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
      },
    }
  },
});

 // 方式三
 grunt.initConfig({
   concat: {
     foo: {
       files: [
         {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
         {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
       ],
     },
     bar: {
       files: [
         {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
         {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
       ],
     },
   },
 });

有关配置任务的其它设置，详细参考文章第三部分。

三 创建任务

上边第一步将任务的所需要的信息都配置好了，接下来就要将具体的任务告诉Grunt。

所谓任务，实际上就是一个函数，这个函数实现了一个功能（例如：清除、混淆压缩、打日志）。

任务有2种形式：

1）自定义的任务；

2）外部定义好的任务，即各种Grunt插件。

Grunt插件非常丰富，基本上不用自定义任务。这里主要讲使用Grunt插件。有关自定义插件任务，在后边会详细说明。

下边两种方式都可以加载Grunt插件任务：

 // 加载Grunt插件任务方式一
 grunt.task.loadNpmTasks('grunt-contrib-clean');

 // 加载Grunt插件任务方式二
 grunt.loadNpmTasks('grunt-contrib-clean');

四 将任务添加到默认任务列表中

实际场景中，会有很多个任务，我们期望在命令行中输入grunt后，这些任务都能按照顺序依次执行。而不是多次输入“grunt 任务名：目标名”。

可以通过注册名字为“default”的别名任务，来实现这一功能。

 task.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

还可以指定参数：

 // 当执行grunt时，将执行concat任务的dist目标任务，然后执行uglify的dist目标任务
 task.registerTask('dist', ['concat:dist', 'uglify:dist']);

注意：这个步骤不是必须的，有些可以通过配置package.json的scripts参数，实现多任务执行。

参考资料&内容来源：

Grunt官网：https://www.gruntjs.net/configuring-tasks

博客园：https://www.cnblogs.com/chaojidan/p/4238421.html

Grunt官网API：https://gruntjs.com/api/grunt