Javascript模块化开发3——Grunt之预处理

一、grunt预处理简述

grunt的注册任务函数本身会对传入的参数和配置对象里的相关属性进行一定的预处理，方便任务函数进行操作。

grunt的registerTask方法和registerMultiTask方法会进行不同的预处理。

二、预处理参数

grunt命令通过grunt taskname:arg1:arg2形式的脚本来传入参数。

grunt会给task对象增加nameArgs属性，其值为"taskname:arg1:arg2"

grunt会给task对象增加name属性，其值为"taskname"

grunt会给task对象增加args属性，registerTask方法下其值为 [ 'arg1', 'arg2' ]，registerMultiTask方法下其值为 ['arg2' ]

grunt会给task对象增加flags属性，registerTask方法下其值为 [ arg1:true, arg2:true ]，registerMultiTask方法下其值为 [arg2::true]

grunt会将args作为参数传给任务的执行函数，registerTask方法下会将arg1，arg2作为执行函数的参数，registerMultiTask方法下会将arg2作为执行函数的参数。

三、registerTask预处理配置对象

grunt会为task对象新增options方法，该方法可以用来获取配置参数下与task名称对应属性下options属性中的值。例如

module.exports = function(grunt) {
    grunt.initConfig({
        hello: {
            options: {
                who: 'Kate'
            }
        }
    });
    grunt.registerTask("hello", function() {
        var options = this.options({ who: 'unknown' });
       console.log('hello,'+options.who); //hello,Kate
    });
};

四、registerMultiTask预处理配置对象

grunt会为task对象新增options方法，该方法除了会获取配置参数下与task名称对应属性下options属性中的值，其值还会进一步被目标级的options对象的属性覆盖，例如

module.exports = function(grunt) {
  grunt.initConfig({
    hello: {
      options: {
        who: 'Kate'
      },
      Jingle:{
        options: {
          who: 'Jingle'
        }
      }
    }
  });
  grunt.registerMultiTask("hello", function() {
    var options = this.options({ who: 'unknown' });
    console.log('hello,'+options.who); //hello,Jingle
  });
};

复合任务会依次执行其所包含的所有除了options以外的已命名的子属性。相应的，注册复合任务的方法也会依次预处理除了options以外的已命名的子属性。

每轮任务中，grunt会为task对象赋予target属性，target属性值为配置对象当前正被遍历的目标的名称。data属性值为配置对象当前正被遍历的目标对应的数据。如上例中，在子任务Log:Jingle中，target为Jingle，data为：

{
  options: {
    who: 'Jingle'
  }
}

由于大多的任务都是执行文件操作，Grunt的注册复合任务的方法中会尽量的将data进一步处理，将其支持的各种格式自动标准化为一个唯一的格式：文件数组格式并将其赋值给任务对象的files属性。

Grunt支持如下的文件模式：

1.最简格式

这个是定义文件数组的最简单的模式，直接定义文件字符串或文件名数组，对应files[0].src, target属性值对应files[0].dest。该格式不支持附加属性。

2.简洁格式

简洁格式（Compact Format）允许单独定义src或dest，支持附加属性，直接对应files[0]。

3.文件对象格式

文件对象格式（Files Object Format）支持多个src-dest映射，属性名是目标文件，属性值是源文件。可利用该格式指定多个映射，但是不支持附加属性。

4.文件数组格式

文件数组格式（Files Array Format）是files属性所使用的格式，支持附加属性，如果不设置expand为true，则相当于将data直接赋值给files。

5.实例

module.exports = function(grunt) {
  grunt.initConfig({
    Log: {
      jian1:"1.txt", //最简格式
      jian2:["1.txt","2.txt"], //最简格式
      compact:{dest:"/dist",prop1:true}, //简洁格式
      fileobject: { //文件对象格式
        files: {
          'dest/a.js': ['src/aa.js', 'src/aaa.js'],
          'dest/a1.js': ['src/aa1.js', 'src/aaa1.js']
        }
      },
      filearray: {  //文件数组格式
        files: [
          {src: ['src/a.js', 'src/b.js'], dest: 'dest/a/', nonull:true,prop1:true},
          {src: ['src/a1.js', 'src/b1.js'], dest: 'dest/a1/', filter: 'isFile'}
        ]
      }
    }
  });
  grunt.registerMultiTask("Log", function() {
    console.log(this.files);
  });
};

输出为：

[
  {
    src: [Getter],
    dest: 'jian1',
    orig: { src: [Array], dest: 'jian1' }
  }
]

Running "Log:jian2" (Log) task
[
  {
    src: [Getter],
    dest: 'jian2',
    orig: { src: [Array], dest: 'jian2' }
  }
]

Running "Log:compact" (Log) task
[
  {
    dest: [ '1.txt' ],
    prop1: true,
    orig: { dest: '/dist', prop1: true }
  }
]

Running "Log:fileobject" (Log) task
[
  {
    src: [Getter],
    dest: 'dest/a.js',
    orig: { src: [Array], dest: 'dest/a.js' }
  },
  {
    src: [Getter],
    dest: 'dest/a1.js',
    orig: { src: [Array], dest: 'dest/a1.js' }
  }
]

Running "Log:filearray" (Log) task
[
  {
    src: [Getter],
    dest: 'dest/a/',
    nonull: true,
    prop1: true,
    orig: { src: [Array], dest: 'dest/a/', nonull: true, prop1: true }
  },
  {
    src: [Getter],
    dest: 'dest/a1/',
    filter: 'isFile',
    orig: { src: [Array], dest: 'dest/a1/', filter: 'isFile' }
  }
]

五、动态构建文件数组

当你希望处理大量的单个文件时，可以通过匹配和一些替换操作来动态构建一个文件列表。只有Compact和Files Array文件映射格式支持这种动态构建文件数组的方式，这时需要在src中增加一些通配符，并附加一些额外的属性，最重要的是，我们需要将expand设置为true来开启这种操作。grunt默认支持的属性有：

1.src(必须)

定义源文件。可为字符串或数组，可包含通配符。

简单常用通配符如下：

• *匹配任意数量的字符，但不匹配 /
• ?匹配单个字符，但不匹配 /
• **匹配任意数量的字符，包括 /，只要它是路径中唯一的一部分
• {}允许使用一个逗号分割的字符列表,用来匹配字符列表中的任一个字符，如{a,b}匹配a或者b
• !在模式的开头用于排除该匹配模式所匹配的任何文件，例如

// 除bar.js之外的所有的.js文件，按字母顺序排序：
{src: ['foo/*.js', '!foo/bar.js'], dest: ...}
// 按字母顺序排序的所有.js文件，但是bar.js在最后。
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

2.dest(必须)

目标文件路径前缀。只能为字符串

3.cwd

所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）

{cwd:'foo', src: ['*.js', '!bar.js'], dest: ...}

相当于

{src: ['foo/*.js', '!foo/bar.js'], dest: ...}

4.ext

对于生成的dest路径中所有实际存在文件，均使用这个属性值替换扩展名。

5.extDot

用于指定标记扩展名的英文点号的所在位置。可以赋值 'first' （扩展名从文件名中的第一个英文点号开始） 或 'last' （扩展名从最后一个英文点号开始），默认值为 'first'。

6.flatten

从生成的dest路径中移除所有的路径部分。

7.rename

对每个匹配的src文件调用这个函数(在重命名后缀和移除路径之后)。dest和匹配的src路径将被作为参数传入，此函数应该返回一个新的dest值。 如果相同的dest返回不止一次，那么，每个返回此值的src来源都将被添加到一个数组中作为源列表。

8.filter

filter属性对匹配到的源文件进行过滤，去除不符合条件的源文件。

filter属性可定义为任意一个有效的fs.Stats方法名：

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: 'isFile',
    },
  },
});

或者定义你自己的filter函数，通过返回true或者false来保留或者过滤文件。下面的例子会将字符串长度小于4的文件名过滤掉：

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: function(filepath) {
        return filepath.length >= 4;
      },
    },
  },
});