1. 程式人生 > 實用技巧 >Grunt之預處理

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

資源搜尋網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com

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