JavaScript 项目构建工具 Grunt 实践：任务和指令

 Grunt 是一个基于任务的 JavaScript 项目命令行构建工具，运行于 Node.js 平台。Grunt 能够从模板快速创建项目，合并、压缩和校验 CSS & JS 文件，运行单元测试以及运行静态服务器。上一篇文章《JavaScript 项目构建工具 Grunt 实践：安装和创建项目框架》介绍了 Grunt 安装和创建项目框架步骤，这篇文章介绍 Grunt 中的任务和指令。

 

 

Grunt 任务

　　Grunt 内置下面六种基本的任务：

• ✓  init - 从模板生成项目框架
• ✓  concat - 合并文件
• ✓  lint - 使用 JSHint 校验代码
• ✓  min - 使用 UglifyJS 压缩代码
• ✓  quint - 运行 Qunit 单元测试（依赖 PhantomJS）
• ✓  server - 启动静态服务器

　　任务按使用方式可以分为别名任务、多任务和自定义任务。

　　一、别名任务

　　基本语法：

grunt.registerTask(taskName, [description, ] taskList);

　　taskName：任务别名，descripation：任务描述，taskList：任务列表。

　　使用示例：

grunt.registerTask( 'theworks' , 'lint qunit concat min' );

　　这样定义以后，下面两条命令是等价的：

grunt theworks
grunt lint qunit concat min

　　如果别名是 "default"，那么命令还可以更简单，只需要输入 grunt 就可以了。

grunt.registerTask( 'default' , 'lint qunit concat min' );

　　下面三条命令是等价的：

grunt
grunt default
grunt lint qunit concat min

　　二、多任务

　　多任务是在如果没有指定任务目标的时候隐式地遍历所有的目标。例如下面的配置，运行 grunt lint:test 或者是 grunt lint:lib 都是校验特定的目录下的 JavaScript 文件，如果是运行 grunt lint 则是自动运行 test、lib 和 grunt 三个目标。

/*global config:true, task:true*/
grunt.initConfig({
  lint: {
    test: [ 'test/*.js' ],
    lib: [ 'lib/*.js' ],
    grunt: [ 'grunt.js' ]
  }
});

　　三、自定义任务

　　如果你的任务不遵循多任务模式，可以自定义任务：

grunt.registerTask( 'default' , 'My "default" task description.' , function () {
  grunt.log.writeln( 'Currently running the "default" task.' );
});

　　在任务里还可以嵌套其它任务：

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

　　甚至运行异步任务：

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 解析。

您可能感兴趣的相关文章

• 经典的白富美型 jQuery 图片轮播插件
• 精心挑选的优秀 jQuery Ajax 分页插件
• 十款精心挑选的在线CSS3代码生成工具
• 让人爱不释手的13套精美网页图标素材
• 10套精美的免费网站后台管理系统模板

 

本文链接：JavaScript 项目构建工具 Grunt 实践：任务和指令

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源