Bower在 Web 应用开发中，一般都会使用很多第三方 JavaScript 库，比如 jQuery 和 Twitter Bootstrap 这样的常见库。传统的做法是从这些库的网站上直接下载所需版本的 JavaScript 库文件，放到 Web 应用的某个目录中，然后在 HTML 页面中引用。这种做法的问题在于引入了很多额外的工作量，包括查找所需的 JavaScript 库文件、下载和管理等。一些 JavaScript 库有很多个版本，也依赖于其他 JavaScript 库。对于给定版本的某个 JavaScript 库，需要找到它所依赖的兼容版本的其他 JavaScript 库。这可能是一个递归的过程，会花费很多的时间。Bower 是一个前端库管理工具，可以很好的解决在 Web 应用中引用第三方库时可能遇到的问题。Bower 所提供的功能类似于 Java 开发中会用到的 Apache Ivy、Apache Maven 或 Gradle 等工具。
Bower 也是基于 NodeJS 开发的。只需要使用“npm install -g bower”命令即可安装。Yeoman 在安装时也包含了 Bower。在安装完 Bower 之后，就可以在命令行使用 bower 命令来管理所需的库。通过“bower help”可以查看 Bower 命令行所支持的操作。一般的做法是首先通过“bower search”命令来搜索需要使用的库。如“bower search jquery”可以用来搜索名称中包含 jquery 的库。当找到所需的库之后，可以通过“bower install”命令来安装。如“bower install jquery-ui”可以用来安装 jQuery UI 库。在安装时可以指定库的版本，如“bower install jquery-ui#1.9.2”可以安装 jQuery UI 的 1.9.2 版本。在使用名称来安装库时，要求该库已经注册到 Bower。Bower 也支持从远程或本地 Git 仓库和本地文件中安装库。Bower 会把下载的库文件放在 bower_components 目录中。当库有更新时，通过“bower update”命令来进行更新。当不需要一个库时，通过“bower uninstall”命令来删除。使用“bower list”命令可以列出来当前应用中已经安装的库的信息。
在通过 Bower 安装库之后，可以直接在 HTML 页面中引用，如 所示。这要求 Bower 的下载目录是可以公开访问的。
清单 9. HTML 页面中引入 Bower 管理的 JavaScript 库1
| <script src="/bower_components/jquery/jquery.min.js"></script>
|
与逐一安装所需的库相比，更好的方式是在 bower.json 文件中定义所依赖的库，然后运行“bower install”命令来安装所有的这些库。bower.json 文件的作用类似于 NodeJS 中 package.json。可以直接创建该文件，也可以通过“bower init”命令来以交互式的方式创建。 给出了 bower.json 文件的示例。使用 dependencies 来声明所依赖的库及其版本。有了 bower.json 文件之后，只需要运行一次“bower install”命令就可以安装所需的全部库。
清单 10. bower.json 文件示例1
2
3
4
5
6
7
8
9
10
11
| {
"name": "yeoman-sample",
"version": "0.1.0",
"dependencies": {
"sass-bootstrap": "~3.0.0",
"requirejs": "~2.1.8",
"modernizr": "~2.6.2",
"jquery": "~1.10.2"
},
"devDependencies": {}
}
|
Bower 本身的配置可以通过.bowerrc 文件来完成。该文件以 JSON 格式来进行配置。 给出了.bowerrc 文件的示例。该示例中通过 directory 定义了 Bower 下载库的目录。
清单 11. 配置 Bower 的.bowerrc 文件1
2
3
| {
"directory": "app/bower_components"
}
|
Yo当打算开始开发一个 Web 应用时，初始的目录结构和基础文件很重要，因为这些是应用开发的基础。有些开发人员选择从零开始进行，或是复制已有的应用。更好的选择是基于已有的模板。很多 Web 应用程序使用 HTML5 Boilerplate 这样的模板来生成初始的代码结构。这样做的好处是可以直接复用已有的最佳实践，避免很多潜在的问题，为以后的开发打下一个良好的基础。Yo 是一个 Web 应用的架构（scaffolding）工具。它提供了非常多的模板，用来生成不同类型的 Web 应用。这些模板称为生成器（generator）。社区也贡献了非常多的生成器，适应于各种不同的场景。通过 Yo 生成的应用使用 Grunt 来进行构建，使用 Bower 进行依赖管理。
以基本的 Web 应用生成器为例，只需要使用“yo webapp”命令就可以生成一个基本的 Web 应用的骨架。运行该命令之后，会有一些提示信息来对生成的应用进行基本的配置，可以选择需要包含的功能。默认生成的 Web 应用中包含了 HTML5 Boilerplate、jQuery、Modernizr 和 Twitter Bootstrap 等。只需要一个简单的命令，就可以生成一个能够直接运行的 Web 应用。后续的开发可以基于生成的应用骨架来进行。这在很大程度上简化了应用的开发工作，尤其是某些原型应用。
在生成的 Web 应用中包含了一些常用的 Grunt 任务。这些任务可以帮助快速的进行开发。这些任务包括：
- grunt server：启动支持 Live Reload 技术的服务器。当本地的文件有修改时，所打开的页面会自动刷新来反映最新的改动。这免去了每次手动刷新的麻烦，使得开发过程变得更加方便快捷。
- grunt test：运行基于 Mocha 的自动化测试。
- grunt build：构建整个 Web 应用。其中所执行的任务包括 JavaScript 和 CSS 文件的合并、压缩和混淆等操作，以及添加版本号等。
YeomanYeoman 的重要之处在于把各种不同的工具整合起来，形成一套完整的前端开发的工作流程。使用 Yeoman 之后的开发流程可以分成如下几个基本的步骤。
在开发的最初阶段需要确定前端的技术选型。这包括选择要使用的前端框架。在绝大部分的 Web 应用开发中，都需要第三方库的支持。有的应用可能只使用 jQuery，有的应用会增加 Twitter Bootstrap 库，而有的应用则会使用 AngularJS。在确定了技术选型之后，就可以在 Yeoman 中查找相应的生成器插件。一般来说，基于常见库的生成器都可以在社区中找到。比如使用 AngularJS、Backbone、Ember 和 Knockout 等框架的生成器。
所有的生成器都使用 npm 来进行安装。生成器的名称都使用“generator-”作为前缀，如“generator-angular”、“generator-backbone”和“generator-ember”等。安装完成之后，通过 yo 命令就可以生成应用的骨架代码，如“yo angular”用来生成基于 AngularJS 的应用骨架。
生成的应用骨架中包含了一个可以运行的基本应用。只需要通过“grunt server”命令来启动服务器就可以查看。应用的骨架搭建完成之后，把生成的代码保存到源代码仓库中。团队可以在这个基础上进行开发。开发中的一些常用任务可以通过 Yeoman 来简化。当需要引入第三方库时，通过 Bower 来搜索并添加。
小结面对复杂的 Web 应用的开发，良好的流程和工具支持是必不可少的，可以让日常的开发工作更加顺畅。Yeoman 作为一个流行的工具集，在整合了 Yo、Grunt 和 Bower 等工具的基础上，定义了一个更加完备和清晰的工作流程。通过把一些最佳实践引入到 Web 应用中，有助于创建高质量和可维护的应用。 |
