Github裝逼指南 - Travis CI 和 Codecov
來自： https://segmentfault.com/a/1190000004415437
好久沒寫博客了，趁著年前空閑的時間來一篇輕松點的東西。最近工作中積累了一些Angular組件打算整一整把他們開源了，既然要開源那么代碼可靠性就很重要了，單測不能少，為了保證每次提交的代碼都能很好的運行，持續集成不能少。之前看到很多開源項目介紹中都有一些單測覆蓋率和build結果的圖標，就像這樣：
覺得挺酷的。打算在自己的開源組件中也整一套。經過Google決定使用TravisCI來進行持續集成，Codecov來統計單測覆蓋率。
Travis CI
Travis CI是國外新興的開源持續集成構建項目，支持Github項目。使用十分方便。
-
使用Github賬號登錄 Travis CI ；
-
登錄之后會自動同步Github項目，選擇需要使用Travis CI的項目
-
在項目的根目錄新增 .travis.yml 文件，內容如下：
#指定運行環境 language: node_js指定nodejs版本，可以指定多個
node_js:
- 0.12.5
運行的腳本命令
script:
- npm run ci
指定分支，只有指定的分支提交時才會運行腳本
branches: only:
- master</pre>
更多語法請看 這里 。使用起來非常方便，這樣當你每次向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 可以通過簡單的配置來運行單測。下面是我一個項目中的配置文件，供大家參考：
</div>
// 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}) }</pre>
通過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。
最后的最后，做一個廣告。 百度告警平臺 。這是一個智能的告警平臺，提供實時精確的告警送達，故障的協作處理能力。再也不需要擔心遺漏監控報警，解放運維人力。
</div>