Github装逼指南——Travis CI 和 Codecov

好久没写博客了，趁着年前空闲的时间来一篇轻松点的东西。
最近工作中积累了一些Angular组件打算整一整把他们开源了，既然要开源那么代码可靠性就很重要了，单测不能少，为了保证每次提交的代码都能很好的运行，持续集成不能少。之前看到很多开源项目介绍中都有一些单测覆盖率和build结果的图标，就像这样：

觉得挺酷的。打算在自己的开源组件中也整一套。
经过Google决定使用TravisCI来进行持续集成，Codecov来统计单测覆盖率。

Travis CI

Travis CI是国外新兴的开源持续集成构建项目，支持Github项目。使用十分方便。

1. 使用Github账号登录Travis CI；

2. 登录之后会自动同步Github项目，选择需要使用Travis CI的项目

3. 在项目的根目录新增.travis.yml文件，内容如下：

#指定运行环境
language: node_js
#指定nodejs版本，可以指定多个
node_js:
  - 0.12.5

#运行的脚本命令
script:
  - npm run ci

#指定分支，只有指定的分支提交时才会运行脚本
branches:
  only:
    - master

更多语法请看这里。使用起来非常方便，这样当你每次向github push代码的时候，Travis CI就会自动运行.travis.yml里面的script。自动进行编译以及运行单测。
由于Travis CI每次build之前都会运行npm install安装项目依赖的npm包，所以在提交代码的时候要保证把所有依赖的包都已经在package.json中声明了，否则build就会失败。

Codecov

Codecov是一个开源的测试结果展示平台，将测试结果可视化。Github上许多开源项目都使用了Codecov来展示单测结果。
Codecov跟Travis CI一样都支持Github账号登录，同样会同步Github中的项目。在nodejs环境下使用Codecov需要安装对于的npm包，运行下面这个命令进行安装：

npm install codecov --save-dev

这个包的作用是将我们运行单测产生的结果文件上传到Codecov上进行可视化展示。同时codecov支持的结果文件类型为cobertura。所以需要保证单测执行的结果文件的类型为cobertura。
前端项目进行单元测试推进karma + 'jasmine'的组合。这两个具体是什么东西大家Google一下就知道。使用karma可以通过简单的配置来运行单测。下面是我一个项目中的配置文件，供大家参考：

// Karma configuration
// Generated on Mon Feb 01 2016 21:34:22 GMT+0800 (中国标准时间)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    // 使用的测试框架jasmine, requirejs支持模块化加载
    frameworks: ['jasmine', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
        // karma中用到进行requirejs配置的文件
        'test/test-main.js',
        // 测试中需要用到的文件，includeed设为false表示在页面加载的时候不会加载相应的js文件，也就是可以通过requirejs进行异步加载
        {pattern: 'node_modules/jquery/dist/jquery.min.js', included: false},
        {pattern: 'node_modules/angular/angular.min.js', included: false},
        {pattern: 'node_modules/angular-mocks/angular-mocks.js', included: false},
        {pattern: 'src/bg-single-selector.js', included: false},
        {pattern: 'test/selector.spec.js', included: false}
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    // 针对bg-single-selector.js生成单测覆盖率结果
    preprocessors: {
        'src/bg-single-selector.js': 'coverage'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    // 测试结果的几种输出方式
    reporters: ['progress', 'coverage', 'verbose'],
    // 测试结果报告的类型
    coverageReporter:{
        reporters: [{
            type:'text-summary'
        }, {
            type: 'html',
            dir: 'test/coverage'
        }, {
            // 这就是Codecov支持的文件类型
            type: 'cobertura',
            subdir: '.',
            dir: 'test/coverage'
        }]
    },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],
    // 运行测试依赖的插件
    plugins: [
        'karma-jasmine',
        'karma-coverage',
        'karma-verbose-reporter',
        'karma-phantomjs-launcher',
        'karma-requirejs'
    ],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  })
}

通过karma进行单元测试，将命令写到.travis.yml中就可以在每次build的时候运行单测，同时运行codecov [cobertura-coverage.xml路径]就会把单测结果上传到Codecov。在本地运行codecov会失败，需要将这个过程加入到Travis CI的build脚本中，才能成功上传。因为在本地运行就会被作为私有项目，对于私有项目在上传结果时需要加上Codecov提供的token。

在github中加入图标

到了最后一步，Travis CI和Codecov都提供图标链接来展示结果。我们只需要将图标链接加入到项目的README中就可以看到结果了。
对于Travis CI来说，点击下图中的图标：

就会弹出图标的地址。
对于Codecov来说，打开项目的设置列表就会看到，如下：

最后只需要将对应的链接加到README文件中就可以了。下面是最后的效果：

是不是很赞！
项目地址：BGSingleSelector，欢迎大家试用提意见，同时不要吝啬Star。

最后的最后，做一个广告。百度告警平台。这是一个智能的告警平台，提供实时精确的告警送达，故障的协作处理能力。再也不需要担心遗漏监控报警，解放运维人力。

最后，安利下我的个人博客，欢迎访问: http://bin-playground.top