Grunt - 配置任务

您可以在 Gruntfile.js 文件 中为 Grunt 定义项目特定的配置数据。

Grunt 配置

可以使用 grunt.initConfig() 方法在 Gruntfile 中初始化任务配置数据。在 grunt.initConfig() 函数中，从 package.json 文件中获取配置信息。配置将包含一个名为 properties 的任务和任意数据。

grunt.initConfig({
    jshint: {
        // jshint 任务的配置
    },
    cssmin: {
        // cssmin 任务的配置
    },
    // 任意非任务特定属性
    my_files: ['dir1/*.js', 'dir2/*.js'],
});

任务配置和目标

当您运行任务时，Grunt 会在名为任务的属性下查找配置。我们将定义具有多个配置和目标选项的任务，如下所示 −

grunt.initConfig({
    jshint:{
        myfile1:{
            //"myfile1"目标选项的配置
        },
        myfile2:{
            //"myfile2"目标选项的配置
        },
    },
    cssmin:{
        myfile3:{
            //"myfile3"目标选项的配置
        },
    },
});

此处，jshint 任务具有 myfile1 和 myfile2 目标，而 cssmin 任务具有 myfile3 目标。当您运行 grunt jshint 时，它将遍历任务和目标以处理指定目标的配置。

选项

在任务配置中定义 options 属性，该属性将覆盖任务默认值。每个目标都包含 options 属性，该属性将覆盖任务级选项。它将具有以下格式 −

grunt.initConfig({
   jshint: {
      options: {
         // 覆盖任务默认值的任务级选项
      },
      myfile: {
         options: {
            // "myfile"目标选项覆盖任务默认值
         },
      },

      myfile1: {
         // 没有选项，目标将使用任务级选项
      },
   },
});

文件

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: ...} // 它指定单个文件

{src: 'myfile/*.js', dest: ...} // 它匹配所有以 .js 结尾的文件

{src: 'myfile/{file1,file2}*.js', dest: ...} // 定义单个节点 glob 模式

{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // 所有文件将按字母顺序显示

// 除 file1.js 之外

动态构建文件对象

当您处理单个文件时，您可以使用其他属性来动态构建文件列表。当您将 expand 属性设置为 true 时，它​​将启用以下某些属性 −

• cwd 匹配此路径的所有 src。

• src 匹配要匹配的模式，相对于 cwd。

• dest 属性指定目标路径前缀。

• ext 将使用在 dest 路径中生成的值替换现有扩展。

• extDot 表示表示扩展的句点所在的位置。它使用 first 句点或 last 句点；默认情况下，它被设置为第一个句点

• flatten从dest路径中删除所有路径部分。

• rename指定一个包含新目标和文件名的字符串。

重命名属性

它是一个独特的 JavaScript 函数，它返回一个字符串，您不能使用字符串值进行重命名。在以下示例中，copy任务将创建 README.md 的备份。

grunt.initConfig({
   copy: {
      backup: {
         files: [{
            expand: true,
            src: ['docs/README.md'],    // 创建 README.md 的备份
            rename: function () {       // 指定重命名函数
               return 'docs/BACKUP.txt'; // 返回包含完整目的地的字符串
            }
         }]
      }
   }
});

模板

您可以使用 <% %> 分隔符指定模板。从配置中读取时，它们将自动扩展。它包括两种类型的属性 −

• <%= prop.subprop %> 属性用于扩展配置中 prop.subprop 的值，该值可以引用字符串值、数组和其他对象。

• <% %> 属性执行用于控制流或循环的内联 JavaScript 代码。

例如 −

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/* <%= val %> */
',
         },
         src: ['<%= myval %>', 'file3/*.js'],
         dest: 'build/<%= file3 %>.js',
      },
   },
   // 任务配置模板中使用的属性
   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") %> */
'
      },
      dist: {
         src: 'src/<%= pkg.name %>.js',
         dest: 'dist/<%= pkg.name %>.min.js'
      }
   }
});