如何构建自动化的前端开发流程(2)
源文件编译
这里我使用的工具是grunt，他本身主要是基于Node.js的文件操作包，其中有许多插件可以让我们完成js文件的compile和compress、sass到css的转换等等操作。要使用它需要先安装命令行工具：npm install grunt-cli -g，然后在项目根目录中创建文件Gruntfile.js，这个文件用于定义各种task，我们首先定义一个task将从bower下载的第三方依赖都打包到文件app/js/lib.js中：
- module.exports = function(grunt) {
- var dependencies = [
- 'components/jquery/jquery.js',
- 'components/underscore/underscore.js',
- 'components/backbone/backbone.js'];
- grunt.initConfig({
- concat: {
- js: {
- src: dependencies,
- dest: 'app/js/lib.js'
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-concat');
- };
这里的grunt-contrib-concat就是grunt的一个插件，用于文件的合并操作，我们已经在前面的package.json中引入了。js是task name；src指定了合并的源文件地址；dest指定了合并的目标文件。这样当我们运行grunt concat:js后，所有的依赖文件都会被合并为app/js/lib.js。这样做的好处是我们可以控制每个依赖的引入顺序，但是麻烦的是每次引入新的依赖都需要手动加入到dependencies数组中。这个暂时没有更好的解决方案，因为不是所有的包都在自己的components.js中声明了main文件，很多时候必须自己手动指定。
JavaScript文件编译完成以后就是CSS文件，在现代的前端开发中，我们已经很少直接写CSS文件了，一般都使用SASS或者LESS。grunt也提供了这种支持，这里我使用的是grunt-contrib-compass：
- module.exports = function(grunt) {
- var sasses = 'sass';
- grunt.initConfig({
- compass: {
- development: {
- options: {
- sassDir: sasses,
- cssDir: 'app/css'
- }
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-compass');
- };
然后运行grunt compass:development就可以完成CSS文件的编译了。
自动化测试
这里我使用的自动化测试工具是Jasmine，它grunt中同样有一个插件：grunt-contrib-jasmine。下面我们来看看如何在Gruntfile.js中定义测试的task：
- module.exports = function(grunt) {
- var sources = 'app/js/**/*.js',
- specs = 'spec/**/*Spec.js';
- grunt.initConfig({
- jasmine: {
- test: {
- src: [sources],
- options: {
- specs: specs,
- helpers: ['spec/helper/**/*.js'],
- vendor: 'app/js/lib.js'
- }
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-jasmine');
- };
配置完成以后就可以运行grunt jasmine:test来跑测试，但问题是每次写完代码都要手动执行一次非常麻烦，最好可以每次代码有更改都自动跑一次，让我们可以更快的得到反馈。grunt的watch插件就提供了这种支持：
- module.exports = function(grunt) {
- var sources = 'app/js/**/*.js',
- specs = 'spec/**/*Spec.js';
- grunt.initConfig({
- jasmine: {
- test: {
- src: [sources],
- options: {
- specs: specs,
- helpers: ['spec/helper/**/*.js'],
- vendor: 'app/js/lib.js'
- }
- }
- },
- watch: {
- test: {
- files: [sources, specs],
- tasks: ['jasmine:test']
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-jasmine');
- grunt.loadNpmTasks('grunt-contrib-watch');
- };
files指定了需要监听变动的文件；tasks指定了修改后自动触发的task。现在只要我们运行grunt watch:test，那么有任何源文件、测试文件的改动，Jasmine测试都会自动运行了。有时候我们也希望测试的结果显示在网页上，便于我们做js的调试。那么可以将tasks:['jasmine:test']改为tasks: ['jasmine:test:build']，然后打开根目录下的_SpecRunner.html文件，就可以在网页中看到测试结果了，再加上一些Chrome的Livereload插件，就可以不用刷新实时的看到测试结果，效率非常之高。虽然grunt插件中也有livereload，但是与grunt-contrib-watch无法很好的集成，所以我没有使用这种方式。
CI Pipeline
由于我的项目是host在github上，所以我选择travis-ci作为我的CI服务器。要启用travis-ci需要以下几步：
- 在travis-ci中注册一个账号，获取一个token；
- 在你的github项目的Settings–>Service Hooks中找到Travis，填入token并且启用；
- 回到travis-ci，在Accounts–>Repositories中打开你的项目的service hook
- Push一个
.travis.yml到github，触发第一次build。 - 修改
package.json的scripts项，指定运行测试的命令
下面我们来看看如何配置.travis.yml：
- language: node_js
- node_js:
- - "0.8"
- before_script:
- - npm install -g grunt-cli
由于我们的环境是基于Node.js搭建的，所以在language设置了nodejs；而**nodejs指定了Node.js的版 本；before_script**指定了在测试运行前需要执行的命令，由于我们的脚本都是基于grunt的，所以需要先安装grunt的命令行包。
然后再修改package.json：
- {
- ⋯⋯
- "scripts": {
- "test": "grunt jasmine:test"
- }
- ⋯⋯
- }
将修改以后的package.jsonpush到github上，再次触发一个新的build，你可以看到你之前错误的build已经绿了。
这里还有一个小提示：如何让build状态显示在项目的readme中？很简单，只需要在README.md中加入以下代码就可以了：
- [](http://travis-ci.org/path/to/your_repository)
到这里基本的环境搭建就完成了，当然我们还可以使用grund的registerTask来定义一个任务序列，还可以加 入template的编译⋯⋯这些都可以通过grunt来灵活设置。最重要的是现在别人拿到一个项目的代码以后，可以通过一些命令来快速的搭建本地环境， 方便的进行测试和开发，而且没有依赖与后端的开发环境，只要定义好接口，前端开发可以完全独立开了。虽然这其中还有很多问题没有解决，例如：
- 如何让第三方依赖自申明main文件
package.json与components.json其实有些重复- Live Reload还需要Chrome插件才能完成
- ⋯⋯
这正是由于现在前端开发环境还没有后端开发的那种标准化，也正是挑战和机遇之所在！
