Grunt - 任務配置

您可以在Gruntfile.js 檔案中定義 Grunt 的專案特定配置資料。

Grunt 配置

可以使用grunt.initConfig() 方法在 Gruntfile 中初始化任務配置資料。在grunt.initConfig() 函式內部，從 package.json 檔案中獲取配置資訊。配置將包含一個名為properties 的任務和任何任意資料。

grunt.initConfig({
   jshint: {
      // configuration for jshint task
   },
   cssmin: {
      // configuration for cssmin task
   },
   // Arbitrary non-task-specific properties
   my_files: ['dir1/*.js', 'dir2/*.js'],
});

任務配置和目標

執行任務時，Grunt 會在任務命名屬性下查詢配置。我們將定義具有多個配置和目標選項的任務，如下所示：

grunt.initConfig({
   jshint: {
      myfile1: {
         // configuration for "myfile1" target options
      },
      myfile2: {
         // configuration for "myfile2" target options
      },
   },
   cssmin: {
      myfile3: {
         // configuration for "myfile3" target options
      },
   },
});

這裡，jshint 任務具有myfile1 和myfile2 目標，而cssmin 任務具有myfile3 目標。執行grunt jshint 時，它將迭代任務和目標以處理指定目標的配置。

選項

在任務配置中定義options 屬性，該屬性將覆蓋任務預設值。每個目標都包含options 屬性，該屬性會覆蓋任務級別的選項。其格式如下：

grunt.initConfig({
   jshint: {
      options: {
         // task-level options that overrides task defaults
      },
      myfile: {
         options: {
            // "myfile" target options overrides task defaults
         },
      },

      myfile1: {
         // there is no option, target will use task-level options
      },
   },
});

檔案

Grunt 提供了一些關於指定任務應操作哪些檔案的思路，並使用不同的方法來指定src-dest 檔案對映。以下是src 和dest 對映支援的一些附加屬性：

filter - 這是一個函式，它指定匹配的src 檔案路徑並返回 true 或 false 值。
nonull - 當設定為 true 時，它定義不匹配的模式。
dot - 它匹配以句點開頭的檔名，反之亦然。
matchBase - 它匹配包含斜槓的模式與路徑的基名。
expand - 它處理 src-dest 檔案對映。

緊湊格式

它指定每個目標的 src-dest 檔案對映，可用於只讀任務，並且只需要src 屬性，不需要dest 屬性。

grunt.initConfig({
   jshint: {
      myfile1: {
         src: ['src/file1.js','src/file2.js']
      },
   },
   cssmin: {
      myfile2: {
         src: ['src/file3.js','src/file4.js'],
         dest: 'dest/destfile.js',
      },
   },
});

檔案物件格式

它為每個目標指定 src-dest 檔案對映，其中屬性名稱是dest 檔案，其值是src 檔案。

grunt.initConfig({
   jshint: {
      myfile1: {
         files: {
            'dest/destfile.js':['src/file1.js','src/file2.js'],
            'dest/destfile1.js':['src/file3.js','src/file4.js'],
         },
      },
      myfile2: {
         files: {
            'dest/destfile2.js':['src/file22.js','src/file23.js'],
            'dest/destfile21.js':['src/file24.js','src/file25.js'],
         },
      },
   },
});

檔案陣列格式

它透過為每個對映使用附加屬性來為每個目標指定 src-dest 檔案對映。

grunt.initConfig({
   jshint: {
      myfile1: {
         files: [
            {src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
            {src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
         ],
      },
      myfile2: {
         files: [
            {src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
            {src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
         ],
      },
   },
});

舊格式

在多工存在之前，存在dest-as-target 檔案格式，其中目標檔案路徑是目標的名稱。以下格式已棄用，不應在程式碼中使用。

grunt.initConfig({
   jshint: {
      'dest/destfile2.js':['src/file3.js','src/file4.js'],
      'dest/destfile5.js':['src/file6.js','src/file7.js'],
   },
});

自定義過濾函式

您可以使用filter 屬性更詳細地幫助目標檔案。以下格式僅在匹配實際檔案時才清理檔案。

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

萬用字元模式

萬用字元是指擴充套件檔名。Grunt 使用內建的 node-glob 和minimatch 庫支援萬用字元。萬用字元模式包括以下幾點：

* 匹配任意數量的字元，但不匹配/。
? 匹配單個字元，但不匹配/。
** 匹配任意數量的字元，包括/。
{} 指定逗號分隔的“或”表示式列表。
! 將否定開頭的模式匹配。

例如：

{src: 'myfile/file1.js', dest: ...} // it specifies the single file

{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js

{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern

{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha

// order except for file1.js

動態構建檔案物件

處理單個檔案時，可以使用其他屬性來動態構建檔案列表。將expand 屬性設定為 true 時，將啟用以下一些屬性：

cwd 將所有src 匹配到此路徑。
src 匹配要匹配的模式，相對於cwd。
dest 屬性指定目標路徑字首。
ext 將用在dest 路徑中生成的 value 替換現有副檔名。
extDot 指示指示副檔名的句點位置。它使用第一個句點或最後一個句點；預設情況下，它設定為第一個句點。
flatten 從dest 路徑中刪除所有路徑部分。
rename 指定包含新目標和檔名的字串。

Rename 屬性

這是一個返回字串的唯一 JavaScript 函式，您不能對 rename 使用字串值。在下面的示例中，copy 任務將建立 README.md 的備份。

grunt.initConfig({
   copy: {
      backup: {
         files: [{
            expand: true,
            src: ['docs/README.md'],    // creating a backup of README.md
            rename: function () {       // specifies the rename function
               return 'docs/BACKUP.txt'; // returns a string with the complete destination
            }
         }]
      }
   }
});

模板

您可以使用<% %> 定界符指定模板。讀取配置時，它們將自動展開。它包括兩種型別的屬性：

<%= prop.subprop %> 屬性用於擴充套件配置中prop.subprop 的值，可以引用字串值、陣列和其他物件。
<% %> 屬性執行用於控制流或迴圈的內聯 JavaScript 程式碼。

例如：

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/* <%= val %> */\n',
         },
         src: ['<%= myval %>', 'file3/*.js'],
         dest: 'build/<%= file3 %>.js',
      },
   },
   // properties used in task configuration templates
   file1: 'c',
   file2: 'b<%= file1 %>d',
   file3: 'a<%= file2 %>e',
   myval: ['file1/*.js', 'file2/*.js'],
});

匯入外部資料

您可以從package.json 檔案匯入外部資料。grunt-contrib-uglify 外掛可用於縮小原始檔，它使用元資料建立橫幅註釋。您可以使用grunt.file.readJSON 和grunt.file.readYAML 匯入 JSON 和 YAML 資料。

例如：

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
      options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
         src: 'src/<%= pkg.name %>.js',
         dest: 'dist/<%= pkg.name %>.min.js'
      }
   }
});

列印頁面