如何构建自动化的前端开发流程(1)
如今的前端开发中，已经不再只是一些简单的静态文件了，对于很多Web App来说，前端代码甚至比后端代码要更加复杂，更加难于管理，例如：
- 我们有许多的第三方库的依赖需要管理；
- 我们有独立的前端测试需要自动运行；
- 我们还有很多代码需要在发布时进行打包压缩；
- ⋯⋯
所以构建一个自动化的前端开发流程是非常必要的，但现在前端开发流程的构建是百花齐放，没有一个统一的标准，还有很多依赖于后端的架构来做前端开发管理。例如在Rails开发中，就有各种前端库的gem包。但是这种依赖于后端框架的管理方式有许多问题：
- 许多gem包的维护者并不是前端库的维护者，所以更新不一定即时；
- 不利于前端代码与后端代码做分离；
- 增加了前端开发者的学习和使用成本；
- ⋯⋯
于是现在出现了一些不依赖于后端代码（虽然还是要依赖Node.js⋯⋯）的管理工具，对于前端开发者非常友好，例如：YEMAN、Jam、volo、component、Brunch⋯⋯但是这些工具都或多或少有自己的一些问题，所以我决定用一些更轻量的工具（bower、grunt）来搭建自己的前端开发流程。本文的例子来自本人正在开发的一个项目，可以在github上查看所有的代码。
什么是开发流程？
在我看来一个完整的开发流程应该包括：
- 本地开发环境的初始化
- 第三方依赖的管理
- 源文件编译
- 自动化测试
- 发布到pipeline和各个环境
而现代的开发流程，就是要使上面的各个部分都可以自动化，一个命令就可以使这些流程都自动走完，并且快速的得到错误或通过的反馈，让我们可以方便快速的修复错误和release。
本地开发环境的初始化
这里我使用的工具是Node.js和NPM，它们都基于JavaScript，使用Json来配置，对于前端开发人员非常友好。
安装完成Node.js和NPM后，在项目根目录下创建NPM的配置文件package.json：
- {
- "name": "Project Name",
- "version": "0.0.1",
- "description": "Project Description",
- "repository": {
- "type": "git",
- "url": "git://github.com/path/to/your_project"
- },
- "author": "Author Name",
- "license": "BSD",
- "readmeFilename": "README.md",
- "gitHead": "git head",
- "devDependencies": {
- "grunt": "latest",
- "grunt-contrib-connect": "latest",
- "grunt-contrib-concat": "latest",
- "grunt-contrib-jasmine": "latest",
- "grunt-contrib-watch": "latest",
- "grunt-contrib-compass": "latest"
- }
- }
其中最重要的一个配置项是devDependencies，这是用于开发的依赖，例如：自动化测试、源文件编译等等，其中各个依赖的作用和用法将会在后面讲到。而前端生产代码的依赖会使用另一个工具来管理，也在后面讲到。创建完成以后运行npm install，NPM就会将这些依赖都安装到项目根目录的node_modules文件夹中。
第三方依赖的管理
这里我使用的工具是bower。 其实NPM也可以管理，但是NPM并不是读取第三方依赖原始的repository，而是读取自己管理的一个repository，所以更新可能会慢点， 并且它使用CommonJS的接口方便Node.js项目的开发，并不是针对纯前端开发的项目；而bower是读取原始的github repository，没有更新延迟的问题，所有包都是针对纯前端开发项目的。
要使用bower只需要简单的三步：
- 安装：
npm install bower -g - 在项目根目录中创建配置文件
.bowerrc - 在项目根目录中创建依赖配置文件
components.json
我们首先来看看.bowerrc的内容：
- {
- "directory" : "components",
- "json" : "component.json",
- "endpoint" : "https://bower.herokuapp.com"
- }
其中directory指定了所有的依赖会被安装到哪里；json指定了依赖配置文件的路径；endpoint制定了依赖的repository的寻址服务器，你可以替换为自己的寻址服务器。
然后我们来看看components.json的内容：
- {
- "name": "Project Name",
- "version": "0.0.1",
- "dependencies": {
- "jquery": "latest",
- "underscore": "latest",
- "backbone": "latest",
- "jasmine-jquery": "latest",
- "jasmine-ajax": "git@github.com:pivotal/jasmine-ajax.git"
- }
- }
其中最重要的就是dependencies，它指定了所有前端开发依赖的包。所有bower包含的依赖都可以在这里查到，对于bower没有包含的依赖也可以直接指定github的repository，例如："jasmine-ajax": "git@github.com:pivotal/jasmine-ajax.git"。
最后运行bower install就可以在components文件夹中看到所有第三方依赖的文件了。但是bower有一个问题，就是它将所有github repository中的文件都下载下来了，其中有许多是我们不需要的文件。下面我们会将我们需要的文件提取出来打包放到我们指定的目录中。
