Grunt 入门指南2:任务配置
配置tasks
这份指南解释了在你的项目里怎么用Gruntfiile配置tasks。
Grunt 配置
task 配置通过grunt.initConfig 方法在Gruntfile中指定。配置主要是task-named 属性,但也会包含一些数据。
grunt.initConfig({
concat: {
// concat task configuration goes here.
},
uglify: {
// uglify task configuration goes here.
},
// Arbitrary non-task-specific properties.
my_property: 'whatever',
my_src_files: ['foo/*.js', 'bar/*.js'],
});
Task 配置和 Targets
当一个task执行,Grunt会查找配置上与此task同名的属性.多个task可以有多个配置,它们被叫做 “targets”.在下面这个例子中, concat
有 foo
和 bar
两个 target, uglify
只有一个 bar
target.
grunt.initConfig({
concat: {
foo: {
// concat task "foo" target options and files go here.
},
bar: {
// concat task "bar" target options and files go here.
},
},
uglify: {
bar: {
// uglify task "bar" target options and files go here.
},
},
});
像grunt concat:foo
或者 grunt concat:bar
这样的task和target 只在指定的目标的配置上处理,当执行grunt concat
时会迭代所有的targets,对每一个进行处理. 注意如果一个task被grunt.renametask
方法重命名后,Grunt将会按新的名字来寻找配置对象。
Options
在task配置中,指定options
属性会覆盖内置的默认options
. 并且每个target都可以指定一个options
属性.Target级的options会覆盖Task级的options.
options
属性是可选的,如果不需要可以省略.
grunt.initConfig({
concat: {
options: {
// Task-level options may go here, overriding task defaults.
},
foo: {
options: {
// "foo" target options may go here, overriding task-level options.
},
},
bar: {
// No options specified; this target will use task-level options.
},
},
});
Files
因为大量的tasks都需要执行文件操作,Grunt提供了强大的文件操作能力. 有很多种方式去定义src-dest(源码-目标)文件映射,可以在不同角度进行控制. 每个task都理解以下的格式, 你可以按需选择.
所有的文件格式都支持src
和dest
, 但是"Compact"和"Files Array"格式支持一些附加的属性:
filter
src里的路径通过任意一个有效的fs.Stats
函数名或者一个函数通过返回true
和false
决定是否匹配nonull
当一个匹配没有找到时,返回包含这个模式的列表自身.当没有任何一个匹配时,返回一个空列表.结合grunt 的--verbore
参数,这个选项可以帮助debug文件的路径问题.dot
即使模式没有包含开始的.
,dot
匹配文件名时也会开始于.
matchBase
如果设置了, 模式在带有斜杠的文件名中,只会最后一个结尾的文件名,比如, a?b 只会匹配/xyz/123/acb
, 但不会匹配xyz/acb/123
expand
提供一个动态的 src-dest 文件映射, 细节请看 "Building the files object dynamically"- 其他的参数只在某些识别它的库中使用. 更多细节可以参考 node-glob 和 minimatch 文档
Compact Format
这种形式允许一个独立的 src-dest 文件映射到每个target. 通常用于只读的tasks, 像 grunt-contrib-jslint, 只有src
没有dest
.这个格式也支持在每个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',
},
},
});
Files Object Format
这种形式支持在一个target里放多个 src-dest 映射,属性名是目标文件,值是单个或多个源码文件. 通过这个方法可以防止任意数量的 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'],
},
},
},
});
File Array Format
这个形式也支持一个target里放多个 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'},
],
},
},
});
Older Format
dest-as-target (target里直接定义dest) 格式是历史遗留的格式,目标文件路径即是target的名字. 不幸的是,因为target名字就是路径,执行 grunt task:target
就变得很尴尬. 同样,你也不能在每个src-dest文件映射上指定一个target级别的options或者附加属性.
考虑到这种格式已经被废弃,请不要使用它.
grunt.initConfig({
concat: {
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/b.js': ['src/bb.js', 'src/bbb.js'],
},
});
Custom Filter Function
filter
属性可以在细节上帮你定位文件. 最简单的是使用一个有效的 fs.Status 函数. 下例中将会只匹配真正的文件:
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);
},
},
},
});
Globbing patterns
很多情况下我们不会指定所有文件的明确路径,所以Grunt 通过内置的 node-glob 和 minimatch 库支持文件名扩展(也就是文件名通配).
常用的通配模式有: * *
匹配任意数量的字符,但不匹配/
* ?
匹配单个字符,但不匹配/
* **
匹配任意长度的字符,包括/
,只要它是路径的唯一部分. * {}
允许用逗号分割一个'或'关系的列表 * !
在开头表示这个模式是反向的
大多数人们需要知道 foo/*.js
会匹配所有在foo/
目录中结尾为.js
的文件,但是foo/**/*.js
会匹配foo/
文件夹以及它的所有子孙级文件夹中结尾为.js
的文件.
同样,对于复杂的通配模式,Grunt允许使用文件路径或者通配模式数组. 在!
前缀的模式从结果集中排除匹配的文件,所有模式将被按序预处理.结果集是去重的。
例子:
// You can specify single files:
{src: 'foo/this.js', dest: ...}
// Or arrays of files:
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: ...}
// Or you can generalize with a glob pattern:
{src: 'foo/th*.js', dest: ...}
// This single node-glob pattern:
{src: 'foo/{a,b}*.js', dest: ...}
// Could also be written like this:
{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}
// All .js files, in foo/, in alpha order:
{src: ['foo/*.js'], dest: ...}
// Here, bar.js is first, followed by the remaining files, in alpha order:
{src: ['foo/bar.js', 'foo/*.js'], dest: ...}
// All files except for bar.js, in alpha order:
{src: ['foo/*.js', '!foo/bar.js'], dest: ...}
// All files in alpha order, but with bar.js at the end.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}
// Templates may be used in filepaths or glob patterns:
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
// But they may also reference file lists defined elsewhere in the config:
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: ...}
想要看更多的通配模式语法,可以参考node-glob和minimatch文档。
Building the files object dynamically
当你想要处理很多独立的文件, 有些附加的属性可能用于动态构建文件列表.以下属性可以指定在"Compact"和"Files Array"映射格式中.
expand
设置为true
开启以下的选项:cwd
所有src
匹配都相对于(但不包含)这个路径src
模式匹配时相对于cwd
dest
目标文件路径前缀ext
在生成的dest
路径中替换所有存在的扩展名为这个值flatten
将生成dest
路径移除所有路径部分rename
这个函数会被每个src
路径调用(在扩展被改名和flatten之后).dest
和匹配的src
路径会当参数传进去,这个函数必须返回一个新的dest
值. 如果同样的dest
被多次返回,每次src
都会用它添加到源码的数组中去.
下面的例子中,minify
task在sratic_mappings
和dynamic_mappings
targets 会看到同样的src-dest列表, 因为Grunt 会自动的扩展dynamic_mappings
文件对象把四个单独的文件放入 src-dest 文件映射,加入4个文件可以在task执行的时候被找到的话.
静态和动态的文件映射可以随便结合着用.
grunt.initConfig({
minify: {
static_mappings: {
// Because these src-dest file mappings are manually specified, every
// time a new file is added or removed, the Gruntfile has to be updated.
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: {
// Grunt will search for "**/*.js" under "lib/" when the "minify" task
// runs and build the appropriate src-dest file mappings then, so you
// don't need to update the Gruntfile when files are added or removed.
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'lib/', // Src matches are relative to this path.
src: ['**/*.js'], // Actual pattern(s) to match.
dest: 'build/', // Destination path prefix.
ext: '.min.js', // Dest filepaths will have this extension.
},
],
},
},
});
Templates
模版使用 <% %>
分割符,并且在tasks读入它的配置后自动扩展.模式会递归的扩展.
整个配置对象是每个确定的属性的上下文. 此外,grunt
在模版内提供了它的方法,比如 <%= grunt.template.today('yyyy-mm-dd') %>
<%= prop.subprop %>
被展开为配置中的prop.subprop
的值,而不用管类型.模版可以使用引用或者值类型.<% %>
可以指定任意的一行javascript代码, 在控制流程和循环的时候很有用
下面给出一个concat
task配置的例子, 执行grunt concat:sample
将会产生一个名为 build/abcde.js
文件,这个文件用banner /* abcde */
连接了所有匹配的文件 foo/*.js
+bar/*.js
+ baz/*.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'
},
},
// Arbitrary properties used in task configuration templates.
foo: 'c',
bar: 'b<%= foo %>d', // 'bcd'
baz: 'a<%= bar %>e', // 'abcde'
qux: ['foo/*.js', 'bar/*.js'],
});
Import External Data
在下面的Gruntfile中, 项目元数据是从package.json
中导入的,并且 grunt-contrib-uglify 插件 uglify
task 配置为压缩源码并且动态使用元数据添加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'
}
}
});