《JavaScript开发框架权威指南》——2.4 处理任务
本节书摘来自异步社区《JavaScript开发框架权威指南》一书中的第2章,第2.4节,作者:【美】Tim Ambler , Nicholas Cloud著,更多章节内容可以访问云栖社区“异步社区”公众号查看
2.4 处理任务对于配置来说,Grunt的config()方法既是“getter”,也是“setter”。在清单中,我们可以看到一个基本的Grunt任务是如何通过此方法来存取配置的。
清单2-9 管理一个基本Grunt任务的配置
module.exports = function(grunt) { grunt.config(basic-task, { message: Hello, world. grunt.registerTask(basic-task, function() { grunt.log.writeln(grunt.config(basic-task.message));
注意:
清单2-9中“点记法”(dot notation)是用来访问多级嵌套的配置参数的。采用同样的方式,点记法还可以用于设置多级嵌套的配置参数值。而且无论在哪里遇到不存在的配置路径,Grunt都会为其创建一个新的空对象,而不抛出异常。
2.4.2 任务描述
随着时间的推移,项目复杂性会逐渐增加,因此需要不断添加新的Grunt任务。但是随着任务的增多,任务的可用性、用途以及调用方法等越来越难以追踪。幸运的是,Grunt已经为我们提供了一条解决此问题的途径。如清单所示,我们可以为任务设定相应的描述。
清单2-10 为Grunt任务设置描述
// example-task-description/Gruntfile.js module.exports = function(grunt) { grunt.config(basic-task, { message: Hello, world. grunt.registerTask(basic-task, This is an example task., function() { grunt.log.writeln(grunt.config(basic-task.message)); grunt.registerTask(default, This is the default task., [basic-task]);
要为任务设置描述,只要在调用registerTask()时多传入一个参数即可。如果在命令行中请求帮助信息,Grunt就会将这些任务描述打印出来。清单截取了其中的一个片段。
清单2-11 在命令行中请求帮助信息
$ grunt --help Available tasks basic-task This is an example task. default This is the default task.
2.4.3 异步任务
默认情况下,Grunt任务是同步执行的。只要任务函数返回,即可认为任务已经执行完毕。然而,有时候我们需要在任务中使用异步函数,而且必须等待其执行完毕才能将控制权交还给Grunt。清单中展示了这个问题的解决方法。在任务中调用async()方法将通知Grunt此任务是异步执行的。该方法返回一个回调函数,用于在任务完成时调用。在此之前,Grunt暂不会执行任何额外的任务。
清单2-12 异步Grunt任务
// example-async/tasks/list-files.js var glob = require(glob); module.exports = function(grunt) { grunt.registerTask(list-files, function() { * Grunt将一直等待我们调用done()函数来通知它异步任务执行完毕。 var done = this.async(); glob(*, function(err, files) { if (err) { grunt.fail.fatal(err); grunt.log.writeln(files); done();
2.4.4 任务依赖
对于复杂的Grunt工作流程,我们最好将其看作由一系列协同工作以达成最终结果的任务步骤组成。这种情况下,为任务指定一个或多个其他任务作为先决条件往往很有帮助,如清单所示。
清单2-13 声明任务依赖
// example-task-dependency/tasks/step-two.js module.exports = function(grunt) { grunt.registerTask(step-two, function() { grunt.task.requires(step-one);
本例中,step-two任务要求step-one必须在其之前运行。任何试图直接调用step-two的行为都将导致错误发生,如清单所示。
清单2-14 依赖项运行之前直接运行任务导致Grunt报错
$ grunt step-two Running "step-two" task Warning: Required task "step-one" must be run first. Use --force to continue. Aborted due to warnings.
2.4.5 多任务
除基本任务之外,Grunt还支持“多任务”(multi-task)。多任务差不多是Grunt里最复杂的概念,所以如果你一开始感到困惑,别担心,这很正常。事实上,只要看过几个例子之后,它们的用途就会变得清晰起来,你也会从此踏上精通Grunt的道路。继续之前,还是让我们先看一个比较简单的多任务示例及其配置(见清单)。
清单2-15 Grunt多任务
// example-list-animals/tasks/list-animals.js module.exports = function(grunt) { * Our multi-tasks configuration object. In this example, mammals * and birds each represent what Grunt refers to as a target. grunt.config(list-animals, { mammals: { animals: [Cat, Zebra, Koala, Kangaroo] birds: { animals: [Penguin, Sparrow, Eagle, Parrot] grunt.registerMultiTask(list-animals, function() { grunt.log.writeln(Target:, this.target); grunt.log.writeln(Data:, this.data);
多任务的使用极其灵活,其设计目的就是在单个项目中支持多种配置(称作“目标”,targets)。清单中的多任务有两个目标:mammals和birds。如清单所示,该任务可以按照任一目标运行。
清单2-16 按照特定目标运行清单中的任务
$ grunt list-animals:mammals Running "list-animals:mammals" (#list-animals) task Target: mammals Data: { animals: [ Cat, Zebra, Koala, Kangaroo ] } Done, without errors.
运行多任务时也可以不传入任何参数。这种情况下,任务会为每个可用的目标都运行一次。清单展示了在不指定目标的情况下运行多任务所产生的结果。
清单2-17 在不指定目标的情况下,运行清单中的多任务
$ grunt list-animals Running "list-animals:mammals" (#list-animals) task Target: mammals Data: { animals: [ Cat, Zebra, Koala, Kangaroo ] } Running "list-animals:birds" (#list-animals) task Target: birds Data: { animals: [ Penguin, Sparrow, Eagle, Parrot ] }
上述示例中,我们的多任务运行了两次,每个目标一次(mammals和birds)。注意在清单中,我们的多任务引用了两个属性:this.target和this.data。这些属性使得多任务能够获取与当前正在运行的目标相关的信息。
2.4.6 多任务选项
在配置多任务时,任何存储在options键下的值(见清单)都会受到特殊处理。
清单2-18 Grunt多任务与Options配置项
// example-list-animals-options/tasks/list-animals.js module.exports = function(grunt) { grunt.config(list-animals, { options: { format: array mammals: { options: { format: json animals: [Cat, Zebra, Koala, Kangaroo] birds: { animals: [Penguin, Sparrow, Eagle, Parrot] grunt.registerMultiTask(list-animals, function() { var options = this.options(); switch (options.format) { case array: grunt.log.writeln(this.data.animals); break; case json: grunt.log.writeln(JSON.stringify(this.data.animals)); break; default: grunt.fail.fatal(Unknown format: + options.format); break;
多任务选项为开发者提供了一种机制,即为任务定义和全局选项可以被目标任务的选项覆写。本例中,动物列表的全局选项format在任务层级被定义为array。目标mammals将其覆写为json,但是目标birds没有。这样,mammals将显示为JSON串,而birds则继承全局选项的设定仍然显示为数组。
今后你遇到的绝大多数Grunt插件都会是可配置的多任务。由此而来的灵活性使得我们可以针对不同的应用环境,以不同的方式运行同一个任务。一个常见的情景就是为不同的构建环境创建不同的输出目标。例如,在编译程序时,针对本地开发环境和产品发布可以选用不同的任务运行配置。
2.4.7 模板配置
Grunt配置对象支持配置嵌入式的模板字符串,可用于之后的其他配置。Grunt支持的模板格式遵循Lodash和Underscore,具体细节会涵盖在后续的章节中。清单和清单中的示例显示了该功能可以如何使用。
清单2-19 Gruntfile样例,Grunt配置对象的pkg键中保存了项目package.json的内容
// example-templates/Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON(package.json) grunt.loadTasks(tasks); grunt.registerTask(default, [test]);
清单2-20 使用自身配置的后续加载任务,可以使用模板来引用其他配置
// example-templates/tasks/test.js module.exports = function(grunt) { grunt.config(test, { banner: %= pkg.name % - %= pkg.version % grunt.registerTask(test, function() { grunt.log.writeln(grunt.config(test.banner));
清单展示了Gruntfile配置样例,其通过使用一系列与文件系统交互的内置方法,实现了加载项目Package.Json文件的内容,这些内置方法会在本章后续内容中讨论。文件内容随后存储在Grunt配置对象的pkg属性中。在清单中可以看到,通过使用配置模板,任务能够直接引用配置对象pkg的信息。
2.4.8 命令行选项
通过如下格式可以为Grunt传递额外配置项。
$ grunt count --count=5
清单中的例子展示了Grunt任务是如何通过grunt.option()方法获取信息的。从清单可以看到调用该任务的结果。
清单2-21 简单Grunt任务计数到指定数字
// example-options/tasks/count.js module.exports = function(grunt) { grunt.registerTask(count, function() { var limit = parseInt(grunt.option(limit), 10); if (isNaN(limit)) grunt.fail.fatal(A limit must be provided (e.g. --limit=10)); console.log(Counting to: %s, limit); for (var i = 1; i = limit; i++) console.log(i); 清单2-22 执行清单中任务的输出结果 $ grunt count --limit=5 Running "count" task Counting to: 5 Done, without errors.
2.4.9 提供反馈
为了在执行任务时为用户提供反馈信息,Grunt提供了一些内置方法,其中某些方法你已经在本章中看过。当然,我们不会在此处列出所有方法,但表中列出了一些常用的。
2.4.10 错误处理
在任务执行的过程中,会遇到错误。当遇到这种情况时,知道如何合理地处理它们是很重要的。当面对一个错误时,开发者需要使用Grunt的错误API。它很易于使用,因为它只提供了两个方法(见表)。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- [转] Javascript 原型链
- larave的大括号和javascript的框架解析冲突
- Google Earth Engine(GEE)——JavaScript和GEE中字符串的区别和数据类型
- JavaScript宝座:七大框架论剑
- 【JavaScript】重温Javascript继承机制
- 一篇文章带你了解JavaScript中的基础算法之“字符串类”
- 深入理解 JavaScript中的变量、值、传参
- ajax-异步JavaScript和XML
- 《深入理解JavaScript》——导读
- 《趣学JavaScript——教孩子学编程》——2.6 本章小结
- 《JavaScript框架设计》——1.4 类型的判定
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.7 表格的结构
- 《HTML、CSS、JavaScript 网页制作从入门到精通》——6.8 练习题
- 《JavaScript开发框架权威指南》——第2章 Grunt 2.1安装Grunt
- 《JavaScript开发框架权威指南》——2.3 将Grunt添加到项目中
- 《JavaScript面向对象精要》——1.5 访问属性
- 《JavaScript框架设计》——1.4 类型的判定
- JavaScript逻辑练习案例:实现倒计时和显示打开时间
- [记录] javascript 对象中使用setTimeout
- JavaScript学习---EXT_JS实用开发指南
- jtemplate 为javascript前端html模版引擎
- 5款帮助简化的HTML5 Audio开发的Javascript类库
- JavaScript获取当前时间
- Javascript框架设计思路图