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

打印页面