如何构建自动化的前端开发流程(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须要如下几步：

1. 在travis-ci中注册一个帐号，获取一个token；
2. 在你的github项目的Settings–>Service Hooks中找到Travis，填入token而且启用；
3. 回到travis-ci，在Accounts–>Repositories中打开你的项目的service hook
4. Push一个.travis.yml到github，触发第一次build。
5. 修改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中加入如下代码就能够了：

[![Build Status](https://travis-ci.org/path/to/your_repository.png?branch=master)](http://travis-ci.org/path/to/your_repository)

到这里基本的环境搭建就完成了，固然咱们还可使用grund的registerTask来定义一个任务序列，还能够加 入template的编译⋯⋯这些均可以经过grunt来灵活设置。最重要的是如今别人拿到一个项目的代码之后，能够经过一些命令来快速的搭建本地环境， 方便的进行测试和开发，并且没有依赖与后端的开发环境，只要定义好接口，前端开发能够彻底独立开了。虽然这其中还有不少问题没有解决，例如：

• 如何让第三方依赖自申明main文件
• package.json与components.json其实有些重复
• Live Reload还须要Chrome插件才能完成
• ⋯⋯

这正是因为如今前端开发环境尚未后端开发的那种标准化，也正是挑战和机遇之所在！