如何讓你的github項目更加高大上

前言

昨天把這個博客網站的代碼開源放在了 github 上，然后剛好不巧看到百度EFE寫的文章 前端開源項目持續集成三劍客 ，突然想起好多項目的ReadMe文件確實看著很酷炫，有很多的徽章，于是就想著自己博客代碼也可以這樣做，顯得自己高大上(偷笑)。。于是花了一天，寫了些單元測試，跑了一下CI，檢測了下代碼，嘩啦啦地就把好多個徽章給加到自己的項目中去了。。最后的效果如圖：

1、Travis CI

首先也是最必須的應該是給自己的項目加個持續測試的功能吧，以前剛畢業的時候在第一家公司都沒有聽過CI著一個概念，后來第二家公司才知道有CI、jenkins之類的概念。后在接觸多了發現jenkins還真的很不錯，全部自動化測試。但是jenkins只能在局域網下測試呀，有沒有工具可以在互聯網下進行測試呢？果然，萬能的外國人就創造了這么一個能夠在互聯網下持續集成你的項目，比較火熱的有： Travis CI 和 Circle CI 。我就選擇了Travis CI來做我的項目的持續集成。

1.1、Travis操作步驟

1. 進入 官網 ，使用github賬號登錄：
   

2. 登錄成功之后進入到你的賬戶頁面： https://travis-ci.org/profile/xxxxxxxx，該頁面會顯示出你所有的github項目：
   之后點擊紅色框中的按鈕，變成綠色之后，點擊右邊的設置按鈕，就可以進入對應項目的CI頁面：

3. 配置package.json文件的scripts字段，添加測試的腳本命令：

   "test": "./node_modules/.bin/mocha test/setup.js test/test*.js",

4. 在項目的根目錄下添加.travis.yml，以個人項目為例：

language: node_js

os:


linux
node_js:  

6
install:  


npm install -g sails bower cnpm
npm i
script:  
npm run cover
after_success:  
npm run coveralls</pre> 
配置解釋： 1. 配置集成測試的語言范疇. 2. 配置測試需要跑的系統環境 3. 測試開始之前需要安裝些什么必備的軟件 4. 測試的腳本 5. 測試成功之后應該執行的動作，因為我們后面會將coveralls的操作放在CI上，所以這里預先配置好。
 
1.2、mocha單元測試的配置
 
Sails官網推薦使用mocha測試框架,我們在根目錄下新建test文件夾，然后添加mocha.opts以及setup.js兩個文件：
 
mocha.opts ：
 
--recursive -R spec  -t 35000
 
setup.js ：
 
'use strict';

var Sails = require('sails');
before(function(done) {

  Sails.lift({
    port: 8989,
    log: {
      noShip: true
    },
    hooks: {
      grunt: false
    },
    models: {
      connection: 'localDiskDb',
      migrate: 'drop'
    }
}, done);
});
after(function() {

  Sails.lower();
});</pre> 
  
配置解釋： 1. 文件 mocha.opts 文件的作用相當于是將命令的參數直接放到文件中，里面的參數含義是：
 
  
1.1. -R，也就是--reporter參數，用來指定測試報告的格式，默認是spec格式。

1.2. --recursive，告訴mocha應該測試test下面所有的測試用例不管在哪一層都會執行
1.3. -t，配置mocha每個測試用例的超時時間，更多配置參考：http://mochajs.org/</pre> 
  
 
   
mocha提供了測試的生命周期，所以在setup.js文件中使用before和after來配置整個測試開始前和結束后應該做的事。我們使用Sails.lift這個API啟動Sails服務器，并配置一些必須的參數。
 
  
 
  
1.3、編寫你的單元測試
 
  
接下去開始寫你的單元測試，mocha的單元測試語法可以參考官網，我簡單地寫了兩個測試腳本(很明顯測試用例不夠，在后面的測試覆蓋率會顯示比較低的百分比)。唯獨需要提醒的一點是：
 
  
beforeEach vs before
 
  
describe('hooks', function() {


before(function() {
    // runs before all tests in this block
});

after(function() {
    // runs after all tests in this block
});

beforeEach(function() {
    // runs before each test in this block
});

afterEach(function() {
    // runs after each test in this block
});

// test cases

});</pre> 
  
所以：
 
  
 
   
before和after的代碼沒有特殊順序要求。
 
   
同一個describe下可以有多個before，執行順序與代碼順序相同。
 
   
同一個describe下的執行順序為before, beforeEach, afterEach, after
 
   
當一個it有多個before的時候，執行順序從最外圍的describe的before開始，其余同理
 
   
使用帶有Each的鉤子是會在每個it語句執行的時候執行一遍，所以編寫測試用例的時候如果你的預置條件僅僅是在一個describe下執行一次的話就請使用before。
 
  
 
  
1.4、上傳代碼觸發CI
 
  
測試編寫完畢之后，本地跑通過之后就可以上傳你的代碼，從而觸發CI的執行。上傳之前記得在你的ReadMe文件下添加你的第一個徽章：
 
  
[![Build Status](https://travis-ci.org/linxiaowu66/douMiBlogPlatform.svg?branch=master)](https://travis-ci.org/linxiaowu66/douMiBlogPlatform)
 
  
這段文字的獲取方法： https://docs.travis-ci.com/user/status-images/
 
  
之后就可以在Travis CI上看到你的項目編譯狀態了：
 
  
 
  
1.5、Tips
 
  
如果你的編譯狀態一直處于 build:unknown 的時候，可以刪除你的項目后重新啟用，也就是在剛才圖3中那個按鈕，先置為灰色再重新置為綠色即可。
 
  
2、coveralls
 
  
接著我們需要生成一份代碼覆蓋率的報告，使用的工具是 coveralls 。做法和travis CI一樣，使用你的github賬號登錄，然后指定你要報告的項目的，這些就不再細說了，唯一一個重要的地方就是獲取該項目的token：
 
  
登錄之后見到這個頁面：
 
  
 
  
之后點擊上面的Add Repo，進入下面的頁面：
 
  
 
  
接著將按鈕置為ON狀態，并點擊右邊的紅色框的 detail ，進入下面的頁面獲取token：
 
  
 
  
2.1、添加.coveralls.yml
 
  
在根目錄下添加 .coverall.yml 文件，并添加下面內容：
 
  
service_name: travis-ci  
repo_token: 91CREHrglvPHyRixRQTOzcAZErWXBuhVS
 
  
2.2、生成測試報告
 
  
給Coveralls上傳的測試報告需要有統一的 lcov 格式，而mocha需要結合 istanbul 工具才可以生成這種格式的報告，所以： 1. cnpm i install istanbul coveralls mocha-lcov-reporter --save-dev
 
  
2. 在package.json文件的 scripts 字段添加下面這行命令： "cover": "./node_modules/.bin/istanbul cover _mocha" ， 使用 mocha是因為如果調用mocha命令的話，它是用過fork一個子進程 mocha來執行測試，這樣就導致 istanbul 在子進程中無法使用鉤子從而默認不會提供覆蓋率，所以直接調用_mocha這個進程才能做到。
 
  
3. 在package.json文件的 scripts 字段繼續添加下面這行命令： "coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls" ， 注意命令行中一個 -- ，這個表示后面的 --report lcovonly 是mocha的命令行參數而不是 istanbul 的！
 
  
4. 配置.travis.yml，內容在上一節已經講過了。直接跑的 npm run cover 。
 
  
2.3、結果展示
 
  
代碼重新push上去之前在ReadMe文件中再添加一個徽章： [![Coverage Status](https://coveralls.io/repos/github/linxiaowu66/douMiBlogPlatform/badge.svg?branch=master)](https://coveralls.io/github/linxiaowu66/douMiBlogPlatform?branch=master)
 
  
徽章的代碼獲取是在你的項目頁面下：
 
  
 
  
命令行結果：
 
  
 
  
3、GA&&stability&&Liscence
 
  
在添加GA和stability這兩個徽章，GA的操作步驟在GA的項目ReadMe文件中寫的很詳細： https://github.com/igrigorik/ga-beacon .
 
  
stability則可以直接寫到你的ReadMe文件中：
 
  
[![Analytics](https://ga-beacon.appspot.com/UA-85522412-2/welcome-page)](https://github.com/igrigorik/ga-beacon)
[![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges)
 
  
License也是類似：
 
  
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
 
  
4、bitHound
 
  
Nodejs的代碼分析工具，非常實用的一個在線code review工具。同理我們使用github賬號登錄，引入你的項目，在你的項目中新建 .bithoundrc 文件：
 
  
{
  "ignore": [
    "**/node_modules/**",
    "**/vendor/**",
    "**/**-min-**",
    "**/**-min.**",
    "**/**.min.**",
    "**/**jquery.?(ui|effects)-*.*.?(*).?(cs|j)s",
    "**/**jquery-*.*.?(*).?(cs|j)s",
    "bower_components/**",
    "api/response/**",
    "api/servives/**"
  ],
  "test": [
    "**/test/**",
    "**/tests/**",
    "**/spec/**",
    "**/specs/**"
  ]
}
 
  
之后你便可以提交代碼，bithound會監聽你的github項目的變化，從而觸發新的代碼檢測，檢測完畢之后便可以在下面的頁面找到好多徽章：
 
  
 
  
于是你又可以在ReadMe 文件中添加下面4個徽章：
 
  
[![bitHound Overall Score](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/badges/score.svg)](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform)
[![bitHound Dependencies](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/badges/dependencies.svg)](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/master/dependencies/npm)
[![bitHound Dev Dependencies](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/badges/devDependencies.svg)](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/master/dependencies/npm)
[![bitHound Code](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/badges/code.svg)](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform)
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
 
  
至此目前項目的徽章就添加完畢了，說了這么多并不是說只是單純地添加這些徽章來酷炫展示，更重要的是提高項目的健壯性，所以對于單元測試不夠的或者代碼檢查有問題的都是需要花心思去修改這些的。同時項目的不同使用的徽章也是不一樣的，大家應該選擇適合自己項目的。
 
  
參考：
 
  
 
   
http://efe.baidu.com/blog/front-end-continuous-integration-tools/
 
   
http://www.imooc.com/article/details/id/2319
 
   
http://blog.csdn.net/u011192270/article/details/51788886
 
  
 
  
 
 
  
來自：http://tech.dianwoda.com/2016/11/10/ru-he-rang-ni-de-githubxiang-mu-geng-jia-gao-da-shang/