当前位置: 首页 > 文档资料 > Grunt 入门教程 >

配置任务(Configuring Tasks)

优质
小牛编辑
129浏览
2023-12-01

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

Grunt配置

可以使用grunt.initConfig()方法在grunt.initConfig()初始化任务配置数据。 在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任务有myfile1myfile2目标, cssmin任务有myfile3目标。 当您运行grunt jshint ,它将遍历任务和目标以处理指定目标的配置。

选项 (Options)

在任务配置中定义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
      },
   },
});

Files

Grunt提供了一些想法,用于指定任务应该在哪些文件上运行,并使用不同的方式来指定src-dest文件映射。 以下是srcdest映射支持的一些其他属性 -

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

全球模式

Globbing意味着扩展文件名。 Grunt通过使用built-in node-globminimatch libraries来支持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表示指示扩展名的句点所在的位置。 它使用first期或last期; 默认情况下,它设置为第first句点

  • flattendest路径中删除所有路径部分。

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

重命名属性

它是一个唯一的JavaScript函数,它返回一个字符串,你不能使用字符串值进行重命名。 在以下示例中, 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
            }
         }]
      }
   }
});

模板(Templates)

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

  • 《%= 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 file导入外部数据。 grunt-contrib- uglify插件可用于缩小源文件,并使用元数据创建横幅注释。 您可以使用grunt.file.readJSONgrunt.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'
      }
   }
});