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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170825.html

標籤：JavaScript

上一篇：JS基礎 —— 資料型別

下一篇：原生 JavaScript 代替 jQuery【轉】

Javascript模塊化開發3——Grunt之預處理