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

1、grunt预处理简述

grunt的注册任务函数自己会对传入的参数和配置对象里的相关属性进行必定的预处理，方便任务函数进行操做。
grunt的registerTask方法和registerMultiTask方法会进行不一样的预处理。

2、预处理参数

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做为执行函数的参数。

3、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
    });
};

4、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' }
  }
]

5、动态构建文件数组

当你但愿处理大量的单个文件时，能够经过匹配和一些替换操做来动态构建一个文件列表。只有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;
      },
    },
  },
});