Yeoman 的最大优势在于它整合了各种流行的实用工具，提供了一站式的解决方案，使得 Web 应用开发中的很多方面变得简单。Yeoman 使得开发人员可以专注于应用本身的实现，而不用在搭建应用的基础结构、进行任务构建和其他辅助任务上花费过多的时间和精力。Yeoman 同时也把一些好的最佳实践自动地引入到项目的开发中。比如当需要在应用中使用第三方的 JavaScript 库时，一般的做法是直接到库的网站上进行下载。而 Yeoman 中基于 Bower 进行依赖管理的做法则是更好的实践方式。
Yeoman 的功能由其所包含的工具来实现。下面分别介绍 Yeoman 中包含的 Yo、Grunt 和 Bower 等工具。
GruntGrunt 是一个 JavaScript 任务执行工具，其核心理念是自动化。在 Web 应用开发过程中，会有很多不同的任务需要执行。这些任务与 Web 应用开发中的不同类型的组件和所处的阶段相关。比如对 JavaScript 来说，在开发阶段会需要使用 JSLint 和 JSHint 这样的工具来检查 JavaScript 代码的质量；在构建阶段，从前端性能的角度出发，会需要把多个 JavaScript 文件在合并之后进行压缩。对于 CSS 文件也有类似的任务需要执行。其他的任务还包括压缩图片、合并压缩和混淆 JavaScript 代码以及运行自动化单元测试用例等。所有这些任务都需要进行相应的配置，并通过对应的方式来运行。不同任务的运行方式并不相同，取决于任务本身使用的技术。比如一些与 JavaScript 相关的任务，如 JSLint 和 JSHint，通过 JavaScript 引擎来运行。对于一般的基于 Java 平台的 Web 应用，如果需要执行 JSLint 任务，需要使用 Rhino 这样的引擎来执行 JavaScript 代码，同时与 Apache Ant、Maven 或 Gradle 这样的构建工具进行集成。这种方式的问题在于不同的任务的配置方式都不相同，并且需要与已有的构建系统进行集成。开发人员需要查询很多的文档才能知道如何配置并使用这些任务。
Grunt 基于流行的 NodeJS 平台来运行。所有的任务执行都基于统一的平台。Grunt 的优势在于集成了非常多的任务插件。这些插件有些是 Grunt 团队开发的，更多的是由社区贡献的。这些插件使用 NodeJS 标准的模块机制来分发，只需要使用 npm 就可以进行管理。Web 应用只需要通过一个文件来声明所要执行的任务并进行相应的配置，Grunt 会负责任务的运行。通过这种方式，所有任务的配置都在一个文件中管理。
Grunt 的安装过程很简单。只需要运行“npm install -g grunt-cli”命令就可以安装。在安装 Yeoman 时，Grunt 就已经作为一部分被自动安装了。对于一个应用来说，使用 Grunt 需要两个文件。一个是 npm 使用的 package.json。该文件中包含了应用的相关元数据。在该文件中需要通过 devDependencies 来声明对 Grunt 及其他插件的依赖。另外一个文件是 Gruntfile，可以是一个 JavaScript 或 CoffeeScript 文件。该文件的作用是配置应用中所需要执行的任务。在 package.json 文件中声明依赖并安装 Grunt 插件之后，就可以在 Gruntfile 中配置并加载这些任务。通过 grunt 命令可以运行这些任务。不同任务的配置方式相对类似，只是所提供的配置项并不相同。
任务配置Gruntfile 中的相关配置都包含在一个 JavaScript 方法中。在这个方法中，通过 grunt.initConfig 方法可以对使用的插件进行配置。由于在 Gruntfile 文件中进行配置时，通常会需要使用 package.json 文件中的某些值，一般的做法是把 package.json 的内容读入到某个属性中，方便在代码的其他部分中使用。 给出了 Gruntfile 的基本结构。调用 initConfig 方法的参数对象中的 pkg 属性表示的是 package.json 的内容。
清单 1. Gruntfile 的基本结构1
2
3
4
5
| module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
};
|
在配置对象中可以包含任意的属性值。不过重要的是执行不同任务的插件所对应的配置项。每个插件的配置项在配置对象中的属性名称与插件的名称相对应。比如 grunt-contrib-concat 插件所对应的配置项属性名称为 concat，如 所示。插件 grunt-contrib-concat 的作用是把多个 JavaScript 文件拼接在一起组成单个文件。在该插件的配置项中，src 和 dest 属性分别表示要拼接的 JavaScript 文件和生成的目标文件的名称。其中 src 属性的值使用通配符指定了一系列文件，dest 属性的值中通过 pkg.name 引用了 package.json 文件中定义的属性 name 的值。“<%= %>”是 Grunt 提供的字符串模板的语法格式，用来根据变量值生成字符串。
清单 2. 插件 grunt-contrib-concat 的配置1
2
3
4
| concat: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
|
Grunt 的模板使用“<% %>”来进行表达式的分隔，同时也支持表达式的嵌套。在解析模板中包含的内容时，整个配置对象被作为解析时的上下文。也就是说配置对象中包含的属性都可以直接在模板中引用。除此之外，grunt 对象及其包含的方法也可以在模板中使用。模板有两种形式：第一种是“<%= %>”，用来引用配置对象中的属性值；第二种是“<% %>”，用来执行任意的 JavaScript 代码，通常用来控制代码执行流程。
有的插件允许同时定义多个不同的配置，称为不同的“目标（target）”。这是因为某些任务在不同的条件下所使用的配置并不相同。对于这些不同的目标，可以在配置对象中添加相应名称的属性来表示。 给出了 grunt-contrib-concat 插件的另一种配置方式。代码中定义了 common 和 all 两个不同的目标。每个目标的配置并不相同。在运行任务时，通过“grunt concat:common”和“grunt concat:all”来运行不同的目标。如果没有指定具体的目标，而是通过“grunt concat”来直接运行，则会依次执行所有的目标。
清单 3. 插件 grunt-contrib-concat 的多目标配置1
2
3
4
5
6
7
8
9
10
| concat: {
common: {
src: ['src/common/*.js'],
dest: 'dist/common.js'
},
all: {
src: ['src/**/*.js'],
dest: 'dist/all.js'
}
}
|
对于包含了多个目标的配置来说，可以通过 options 属性来配置不同目标的默认属性值。在目标中也可以通过 options 属性来覆写默认值。
任务创建与执行在对插件进行配置之后，需要在 Gruntfile 中创建相关的任务。这些任务由 Grunt 负责执行。在加载了 Grunt 插件之后，该插件提供的任务可以被执行。也可以通过 grunt.registerTask 方法来定义新的任务，或是为已有的任务创建别名。在定义一个任务时，需要提供任务的名称和所执行的方法。任务的描述是可选的。 中给出了一个简单的任务。当通过“grunt sample”运行该任务时，会在控制台输出相应的提示信息。
清单 4. 简单的 Grunt 任务1
2
3
| grunt.registerTask('sample', 'My sample task', function() {
grunt.log.writeln('This is a sample task.');
});
|
在定义任务时可以声明任务运行时所需的参数，在通过 grunt 运行任务时可以指定这些参数的值。 给出了一个包含参数的任务的示例。任务 profile 在运行时需要提供 2 个参数 name 和 email。在通过 grunt 运行时，使用“grunt profile:alex:alex@example.org”可以把参数值“alex”和“alex@example.org”分别传递给参数 name 和 email。不同的参数之间通过“:”分隔。
清单 5. 包含参数的 Grunt 任务1
2
3
| grunt.registerTask('profile', 'Print user profile', function(name, email) {
grunt.log.writeln('Name -> ' + name + '; Email -> ' + email);
});
|
如果要定义的任务类似 grunt-contrib-concat 插件可以支持多个不同的目标，只需要使用 grunt.registerMultiTask 方法来进行定义即可。
除了定义新的任务之外，还可以通过为已有的任务添加别名的方式来创建新的任务。 给出了一个示例。名为 default 的任务在执行时，会依次执行 jshint、qunit、concat 和 uglify 等任务。当运行 grunt 命令时，如果没有指定任务名称，会尝试运行名为 default 的任务。
清单 6. 使用添加别名的方式创建的任务1
| grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
|
大部分任务是同步执行的，也可以用异步的方式来执行。如果任务中的某部分需要比较长的时间完成，可以通过异步的方式来完成。 给出了一个异步执行的任务的示例。通过调用 async 方法可以把当前任务的执行变成异步的。调用 async 方法的返回值是一个 JavaScript 方法。当任务执行完成之后，调用该 JavaScript 方法来通知 grunt。
清单 7. 异步执行的任务1
2
3
4
5
6
7
| grunt.registerTask('asynctask', function() {
var done = this.async();
setTimeout(function() {
grunt.log.writeln('Done!');
done();
}, 1000);
});
|
一个任务可以依赖其他任务的成功执行。当某个任务执行失败之后，剩下的其他任务不会被执行，除非在执行 grunt 命令时使用了“--force”参数。在任务代码中可以通过 grunt.task.requires 方法来声明对其他任务的依赖。如果所依赖的任务没有成功执行，当前任务也不会被执行。当任务对应的 JavaScript 方法在执行时返回 false 时，该任务被认为执行失败。对于异步执行的任务，只需要在调用 async 返回的回调方法时传入 false 参数即可。比如在 7中，可以使用“done(false);”来声明异步任务执行失败。
为了能够在调用 grunt 时使用插件提供的任务，需要使用 grunt.loadNpmTasks 方法来加载插件。 给出了加载 grunt-contrib-watch 和 grunt-contrib-concat 插件的示例。
清单 8. 插件加载示例1
2
| grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
|
|
