Grunt-配置任务 - 芒果文档

📌 相关文章

📜 Grunt-配置任务

📅 最后修改于: 2020-10-25 05:39:44 🧑 作者: Mango

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

咕unt配置

可以使用grunt.initConfig（）方法在Gruntfile中初始化任务配置数据。在grunt.initConfig（）函数内部，从package.json文件获取配置信息。该配置将包含一个名为属性的任务和任何任意数据。

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

任务配置和目标

运行任务时，Grunt将在task-named属性下查找配置。我们将定义具有多个配置和目标选项的任务，如下所示：

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时定义不匹配的模式。
点-它匹配以句点或其他开头的文件名。
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'},
         ],
      },
   },
});

较旧的格式

目标多目标文件格式是存在多任务之前的目标文件路径是目标名称的文件格式。不赞成使用以下格式，因此在代码中不使用。

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库来支持globbing。球形模式包括以下几点-

*可以匹配任意数量的字符，但不能匹配/ 。
？匹配单个字符，但不匹配/ 。
**与许多字符匹配，包括/ 。
{}指定逗号分隔的“或”表达式列表。
！将在开始时否定模式匹配。

例如-

{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路径中生成的值替换现有的扩展名。
extDot指示表示扩展名的句点所在的位置。它使用第一个期间或最后一个期间；默认情况下，它设置为第一个期间
展平从目标路径中删除所有路径部分。
重命名指定包含新目的地和文件名的字符串。

重命名属性

这是一个独特的JavaScript函数，它返回一个字符串，并且您不能使用字符串值进行重命名。在以下示例中，复制任务将创建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的值，该配置可以引用字符串值，数组和其他对象。
属性执行用于控制流或循环的内联JavaScript代码。

例如-

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/*  */\n',
         },
         src: ['', 'file3/*.js'],
         dest: 'build/.js',
      },
   },
   // properties used in task configuration templates
   file1: 'c',
   file2: 'bd',
   file3: 'ae',
   myval: ['file1/*.js', 'file2/*.js'],
});

导入外部数据

您可以从package.json文件导入外部数据。 grunt- contribugify插件可用于缩小源文件，并使用元数据创建标题注释。您可以使用grunt.file.readJSON和grunt.file.readYAML导入JSON和YAML数据。

例如-

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
      options: {
         banner: '/*!   */\n'
      },
      dist: {
         src: 'src/.js',
         dest: 'dist/.min.js'
      }
   }
});