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;
      },
    },
  },
});