Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及运行静态服务器。上一篇文章《JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架》介绍了 Grunt 安装和创建项目框架步骤,这篇文章介绍 Grunt 中的任务和指令。
Grunt 任务
Grunt 内置下面六种基本的任务:
- ✓ init - 从模板生成项目框架
- ✓ concat - 合并文件
- ✓ lint - 使用 JSHint 校验代码
- ✓ min - 使用 UglifyJS 压缩代码
- ✓ quint - 运行 Qunit 单元测试(依赖 PhantomJS)
- ✓ server - 启动静态服务器
任务按使用方式可以分为别名任务、多任务和自定义任务。
一、别名任务
基本语法:
1
|
grunt.registerTask(taskName, [description, ] taskList); |
taskName:任务别名,descripation:任务描述,taskList:任务列表。
使用示例:
1
|
grunt.registerTask( 'theworks' , 'lint qunit concat min' ); |
这样定义以后,下面两条命令是等价的:
1
2
|
grunt theworks grunt lint qunit concat min |
如果别名是 "default",那么命令还可以更简单,只需要输入 grunt 就可以了。
1
|
grunt.registerTask( 'default' , 'lint qunit concat min' ); |
下面三条命令是等价的:
1
2
3
|
grunt grunt default grunt lint qunit concat min |
二、多任务
多任务是在如果没有指定任务目标的时候隐式地遍历所有的目标。例如下面的配置,运行 grunt lint:test 或者是 grunt lint:lib 都是校验特定的目录下的 JavaScript 文件,如果是运行 grunt lint 则是自动运行 test、lib 和 grunt 三个目标。
1
2
3
4
5
6
7
8
|
/*global config:true, task:true*/ grunt.initConfig({ lint: { test: [ 'test/*.js' ], lib: [ 'lib/*.js' ], grunt: [ 'grunt.js' ] } }); |
三、自定义任务
如果你的任务不遵循多任务模式,可以自定义任务:
1
2
3
|
grunt.registerTask( 'default' , 'My "default" task description.' , function () { grunt.log.writeln( 'Currently running the "default" task.' ); }); |
在任务里还可以嵌套其它任务:
1
2
3
4
5
6
|
grunt.registerTask( 'foo' , 'My "foo" task.' , function () { // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order. grunt.task.run( 'bar baz' ); // Or: grunt.task.run([ 'bar' , 'baz' ]); }); |
甚至运行异步任务:
1
2
3
4
5
6
7
8
9
10
11
|
grunt.registerTask( 'asyncfoo' , 'My "asyncfoo" task.' , function () { // Force task into async mode and grab a handle to the "done" function. var done = this .async(); // Run some sync stuff. grunt.log.writeln( 'Processing task...' ); // And some async stuff. setTimeout( function () { grunt.log.writeln( 'All done!' ); done(); }, 1000); }); |
Grunt 指令
Grunt 内置下面五种指令:
<config:prop.subprop>
用于扩展 prop.subprop 配置属性的值。
<json:file.json>
用于调用通过 grunt.file.parseJSON 从 file.json 解析出来的对象。
<banner:prop.subprop>
用于访问 prop.subprop 参数属性,通过 grunt.template.process 解析。
<file_strip_banner:file.js>
用于引入将要嵌入注释的脚本文件
<file_template:file.js>
用于引入模板文件,通过 grunt.template.process 解析。
您可能感兴趣的相关文章