grunt配置任务

最新推荐文章于 2022-07-29 21:57:22 发布

oooodboooo

最新推荐文章于 2022-07-29 21:57:22 发布

阅读量616

点赞数

分类专栏： grunt 文章标签： Grunt配置任务

grunt 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

配置任务

使用 Gruntfile 为项目配置任务。

Grunt 配置

任务配置定义在 Gruntfile 的 grunt.initConfig 方法中。配置主要是以任务命名的属性，也可以包含其他数据，但不能与任务所需的属性冲突。

grunt.initConfig({
  concat: {
    // concat 任务的配置
  },
  uglify: {
    // uglify 任务的配置
  },
  // 其他与任务无关的属性
  my_property: 'whatever',
  my_src_files: ['foo/*.js', 'bar/*.js'],
});

任务配置和目标

当任务运行时，Grunt 会从与其同名的属性中查找配置。多重任务可以有多个配置，每个任务使用任意命名的目标定义。例如，concat 任务有 foo 和 bar 两个目标，而 uglify 任务只有 bar 一个目标：

grunt.initConfig({
  concat: {
    foo: {
      // concat 任务的目标 "foo"
    },
    bar: {
      // concat 任务的目标 "bar"
    },
  },
  uglify: {
    bar: {
      // uglify 任务的目标 "bar"
    },
  },
});

运行 grunt concat:foo 或 grunt concat:bar 只会处理指定的目标配置，而运行 grunt concat 则会依次处理所有目标。

选项

在任务配置中，options 属性可用于覆盖默认值。每个目标都可以有独立的 options 属性。目标级的选项会覆盖任务级的选项。

grunt.initConfig({
  concat: {
    options: {
      // 任务级的选项，覆盖任务的默认值
    },
    foo: {
      options: {
        // 目标 "foo" 的选项，覆盖任务级的选项
      },
    },
    bar: {
      // 没有定义选项，使用任务级的选项
    },
  },
});

文件

所有文件格式都支持 src 和 dest 属性，"简洁格式" 与 "文件数组格式" 还支持以下属性：

filter 用于匹配 src 文件路径，传入 fs.Stats 方法名或自定义函数，返回 true 或 false。
nonull 当一个匹配没有被检测到时，返回一个包含模式自身的列表。否则，如果没有任何匹配项时，则返回一个空列表。
dot 允许模式匹配以句点开头的文件名。
matchBase 不带斜线的模式将不会匹配包含在斜线中的文件名。比如，a?b 匹配路径 /xyz/123/acb 但不匹配 /xyz/acb/123。
expand 处理动态的 src-dest 映射。详见动态构建文件对象。
查看 node-glob 与 minimatch 文档获取更多信息。

简洁文件格式

每个目标只有一个 src-dest 映射，每个映射可以有附加属性。

grunt.initConfig({
  jshint: {
    foo: {
      src: ['src/aa.js', 'src/aaa.js']
    },
  },
  concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    },
  },
});

文件对象格式

每个目标可以有多个 src-dest 映射，其中属性名是目标文件，属性值是源文件。不能为每个映射定义附加属性。

grunt.initConfig({
  concat: {
    foo: {
      files: {
        'dest/a.js': ['src/aa.js', 'src/aaa.js'],
        'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
      },
    },
    bar: {
      files: {
        'dest/b.js': ['src/bb.js', 'src/bbb.js'],
        'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'],
      },
    },
  },
});

文件数组格式

每个目标可以有多个 src-dest 映射，每个映射可以有附加属性。

grunt.initConfig({
  concat: {
    foo: {
      files: [
        {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
        {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
      ],
    },
    bar: {
      files: [
        {src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
        {src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
      ],
    },
  },
});

自定义过滤函数

filter 属性可用于精确定位文件。属性值可以是 fs.Stats 方法名。例如，只匹配文件：

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

或者自定义 filter 函数，根据是否匹配返回 true 或 false。例如，匹配空目录：

grunt.initConfig({
  clean: {
    foo: {
      src: ['tmp/**/*'],
      filter: function(filepath) {
        return (grunt.file.isDir(filepath) && require('fs').readdirSync(filepath).length === 0);
      },
    },
  },
});

通配符模式

* 匹配任意数量的字符，除了 /
? 匹配单个字符，除了 /
** 匹配任意数量的字符，包括 /
{} 以逗号分割的"或"表达式列表
! 匹配取反

例如，foo/*.js 会匹配所有 foo/ 目录下以 .js 结尾的文件, 而 foo/**/*.js 会匹配所有 foo/ 目录及其子目录下以 .js 结尾的文件。

例子：

// 单个文件
{src: 'foo/this.js', dest: ...}
// 文件数组
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: ...}
// 通配符模式
{src: 'foo/th*.js', dest: ...}

// node-glob 模式
{src: 'foo/{a,b}*.js', dest: ...}
// 等同于
{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

// foo/ 目录中所有的 .js 文件，按字母排序
{src: ['foo/*.js'], dest: ...}
// 先是 bar.js，接着是剩下的 .js 文件，按字母排序
{src: ['foo/bar.js', 'foo/*.js'], dest: ...}

// 除 bar.js 之外的所有的 .js 文件，按字母排序
{src: ['foo/*.js', '!foo/bar.js'], dest: ...}
// 所有 .js 文件，按字母排序, 但是 bar.js 在最后
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

// 可以用模板字符串
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
// 可以引用在配置中定义的其他文件列表
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: ...}

动态构建文件对象

当处理大量的单个文件时，一些附加的属性可以用来动态地构建文件列表。

expand 设为 true 用于启用以下选项：

cwd 所有 src 的匹配都是相对于当前路径，但不包括当前路径。
src 相对于 cwd 路径的匹配模式。
dest 目标路径的前缀。
ext 使用这个属性值替换生成的 dest 路径中所有文件的扩展名。
extDot 用于指定扩展名点号的位置。可以设为 'first' (扩展名始于文件名的第一个点号)或 'last' (扩展名始于文件名的最后一个点号)，默认为 'first'。[0.4.3 新增]
flatten 从生成的 dest 路径中移除所有的路径部分。
rename 在执行 ext 和 flatten 之后，对每个匹配的 src 文件调用这个函数。传入 dest 和匹配的 src路径，返回一个新的 dest 值。如果返回相同的 dest 不止一次，每个使用它的 src 来源都将被添加到一个数组中。

在下面的例子中，static_mappings 和 dynamic_mappings 两个目标中查找到的文件映射列表是相同的，这是因为任务运行时 Grunt 会自动将 dynamic_mappings 文件对象扩展为与 static_mappings 一致的静态文件映射。

grunt.initConfig({
  uglify: {
    static_mappings: {
      // 静态文件映射，
      // 添加或删除文件时需要更新 Gruntfile。
      files: [
        {src: 'lib/a.js', dest: 'build/a.min.js'},
        {src: 'lib/b.js', dest: 'build/b.min.js'},
        {src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
        {src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
      ],
    },
    dynamic_mappings: {
      // 动态文件映射，
      // 当任务运行时会自动在 "lib/" 目录下查找 "**/*.js" 并构建文件映射，
      // 添加或删除文件时不需要更新 Gruntfile。
      files: [
        {
          expand: true,     // 启用动态扩展
          cwd: 'lib/',      // 源文件匹配都相对此目录
          src: ['**/*.js'], // 匹配模式
          dest: 'build/',   // 目标路径前缀
          ext: '.min.js',   // 目标文件路径中文件的扩展名
          extDot: 'first'   // 扩展名始于文件名的第一个点号
        },
      ],
    },
  },
});

模板

模版使用 <% %> 分隔符定义，当任务从配置读取时会自动进行扩展。模板会被递归地扩展，直到全部扩展完成。

模版的处理都是在整个配置对象的上下文环境中的。因此，可以在模板中使用 grunt 方法，比如：<%= grunt.template.today('yyyy-mm-dd') %>。

<%= prop.subprop %> 扩展配置中 prop.subprop 的值，无论什么数据类型。不仅可以引用字符串值，也可以是数组或其他对象。
<% %> 执行任意内联的 JavaScript 代码。可用于控制流或循环。

下面的例子中，运行 grunt concat:sample 时会拼接 banner 中的 /* abcde */ 与 foo/*.js + bar/*.js +baz/*.js 所匹配的文件，并生成名为 build/abcde.js 的文件。

grunt.initConfig({
  concat: {
    sample: {
      options: {
        banner: '/* <%= baz %> */\n',   // '/* abcde */\n'
      },
      src: ['<%= qux %>', 'baz/*.js'],  // [['foo/*.js', 'bar/*.js'], 'baz/*.js']
      dest: 'build/<%= baz %>.js',      // 'build/abcde.js'
    },
  },
  // 用于任务配置模板的任意属性
  foo: 'c',
  bar: 'b<%= foo %>d', // 'bcd'
  baz: 'a<%= bar %>e', // 'abcde'
  qux: ['foo/*.js', 'bar/*.js'],
});

导入外部数据

下面的例子中，项目的元数据是从 package.json 文件导入到 Grunt 配置中的，并且 grunt-contrib-uglify 插件的 uglify 任务被配置用于压缩一个源文件并使用元数据动态地生成 banner 注释。

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