如何让你的github项目更加高大上
hjw13
8年前
<h2>前言</h2> <p>昨天把这个博客网站的代码开源放在了 github 上，然后刚好不巧看到百度EFE写的文章 前端开源项目持续集成三剑客 ，突然想起好多项目的ReadMe文件确实看着很酷炫，有很多的徽章，于是就想着自己博客代码也可以这样做，显得自己高大上(偷笑)。。于是花了一天，写了些单元测试，跑了一下CI，检测了下代码，哗啦啦地就把好多个徽章给加到自己的项目中去了。。最后的效果如图：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/343a9afed50a7bea23c8f547d39c345b.png"></p> <h2><strong>1、Travis CI</strong></h2> <p>首先也是最必须的应该是给自己的项目加个持续测试的功能吧，以前刚毕业的时候在第一家公司都没有听过CI着一个概念，后来第二家公司才知道有CI、jenkins之类的概念。后在接触多了发现jenkins还真的很不错，全部自动化测试。但是jenkins只能在局域网下测试呀，有没有工具可以在互联网下进行测试呢？果然，万能的外国人就创造了这么一个能够在互联网下持续集成你的项目，比较火热的有： Travis CI 和 Circle CI 。我就选择了Travis CI来做我的项目的持续集成。</p> <h3><strong>1.1、Travis操作步骤</strong></h3> <ol> <li> <p>进入 官网 ，使用github账号登录：<br> <img src="https://simg.open-open.com/show/fddc7b1e58afe07752f063b869673a8a.png"></p> </li> <li> <p>登录成功之后进入到你的账户页面： https://travis-ci.org/profile/xxxxxxxx，该页面会显示出你所有的github项目：<br> <img src="https://simg.open-open.com/show/4661931196d1179db174c7bbbeac7821.png"> 之后点击红色框中的按钮，变成绿色之后，点击右边的设置按钮，就可以进入对应项目的CI页面： <img src="https://simg.open-open.com/show/41622946f8ab866fdfa7bd42a26c06cf.png"></p> </li> <li> <p>配置package.json文件的scripts字段，添加测试的脚本命令：</p> "test": "./node_modules/.bin/mocha test/setup.js test/test*.js",</li> <li> <p>在项目的根目录下添加.travis.yml，以个人项目为例：</p> </li> </ol> <pre> 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> <p>配置解释： 1. 配置集成测试的语言范畴. 2. 配置测试需要跑的系统环境 3. 测试开始之前需要安装些什么必备的软件 4. 测试的脚本 5. 测试成功之后应该执行的动作，因为我们后面会将coveralls的操作放在CI上，所以这里预先配置好。</p> <h3><strong>1.2、mocha单元测试的配置</strong></h3> <p>Sails官网推荐使用mocha测试框架,我们在根目录下新建test文件夹，然后添加mocha.opts以及setup.js两个文件：</p> <p>mocha.opts ：</p> <pre> --recursive -R spec -t 35000</pre> <p>setup.js ：</p> <pre> '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> <p>配置解释： 1. 文件 mocha.opts 文件的作用相当于是将命令的参数直接放到文件中，里面的参数含义是：</p> <pre> 1.1. -R，也就是--reporter参数，用来指定测试报告的格式，默认是spec格式。 1.2. --recursive，告诉mocha应该测试test下面所有的测试用例不管在哪一层都会执行 1.3. -t，配置mocha每个测试用例的超时时间，更多配置参考：http://mochajs.org/</pre> <ol> <li>mocha提供了测试的生命周期，所以在setup.js文件中使用before和after来配置整个测试开始前和结束后应该做的事。我们使用Sails.lift这个API启动Sails服务器，并配置一些必须的参数。</li> </ol> <h3><strong>1.3、编写你的单元测试</strong></h3> <p>接下去开始写你的单元测试，mocha的单元测试语法可以参考官网，我简单地写了两个测试脚本(很明显测试用例不够，在后面的测试覆盖率会显示比较低的百分比)。唯独需要提醒的一点是：</p> <p>beforeEach vs before</p> <pre> 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> <p>所以：</p> <ol> <li>before和after的代码没有特殊顺序要求。</li> <li>同一个describe下可以有多个before，执行顺序与代码顺序相同。</li> <li>同一个describe下的执行顺序为before, beforeEach, afterEach, after</li> <li>当一个it有多个before的时候，执行顺序从最外围的describe的before开始，其余同理</li> <li>使用带有Each的钩子是会在每个it语句执行的时候执行一遍，所以编写测试用例的时候如果你的预置条件仅仅是在一个describe下执行一次的话就请使用before。</li> </ol> <h3><strong>1.4、上传代码触发CI</strong></h3> <p>测试编写完毕之后，本地跑通过之后就可以上传你的代码，从而触发CI的执行。上传之前记得在你的ReadMe文件下添加你的第一个徽章：</p> <p>[](https://travis-ci.org/linxiaowu66/douMiBlogPlatform)</p> <p>这段文字的获取方法： <a href="/misc/goto?guid=4959724754263558924" rel="nofollow,noindex">https://docs.travis-ci.com/user/status-images/</a></p> <p>之后就可以在Travis CI上看到你的项目编译状态了：</p> <p><img src="https://simg.open-open.com/show/9e231f3ae263d976f8d7baabe5c4777a.png"></p> <h3><strong>1.5、Tips</strong></h3> <p>如果你的编译状态一直处于 build:unknown 的时候，可以删除你的项目后重新启用，也就是在刚才图3中那个按钮，先置为灰色再重新置为绿色即可。</p> <h2><strong>2、coveralls</strong></h2> <p>接着我们需要生成一份代码覆盖率的报告，使用的工具是 coveralls 。做法和travis CI一样，使用你的github账号登录，然后指定你要报告的项目的，这些就不再细说了，唯一一个重要的地方就是获取该项目的token：</p> <p>登录之后见到这个页面：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/df4e17cb1fc5e0e405439c49161f15fe.png"></p> <p>之后点击上面的Add Repo，进入下面的页面：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/28c966c1b2e7602bf2493412fbd0b50c.png"></p> <p>接着将按钮置为ON状态，并点击右边的红色框的 detail ，进入下面的页面获取token：</p> <p><img src="https://simg.open-open.com/show/fccdc48797d586297d98a043f0124804.png"></p> <h3><strong>2.1、添加.coveralls.yml</strong></h3> <p>在根目录下添加 .coverall.yml 文件，并添加下面内容：</p> <pre> service_name: travis-ci repo_token: 91CREHrglvPHyRixRQTOzcAZErWXBuhVS</pre> <h3><strong>2.2、生成测试报告</strong></h3> <p>给Coveralls上传的测试报告需要有统一的 lcov 格式，而mocha需要结合 istanbul 工具才可以生成这种格式的报告，所以： 1. cnpm i install istanbul coveralls mocha-lcov-reporter --save-dev</p> <p>2. 在package.json文件的 scripts 字段添加下面这行命令： "cover": "./node_modules/.bin/istanbul cover _mocha" ， 使用 <em>mocha是因为如果调用mocha命令的话，它是用过fork一个子进程</em> mocha来执行测试，这样就导致 istanbul 在子进程中无法使用钩子从而默认不会提供覆盖率，所以直接调用_mocha这个进程才能做到。</p> <p>3. 在package.json文件的 scripts 字段继续添加下面这行命令： "coveralls": "npm run cover -- --report lcovonly && cat ./coverage/lcov.info | ./node_modules/.bin/coveralls" ， 注意命令行中一个 -- ，这个表示后面的 --report lcovonly 是mocha的命令行参数而不是 istanbul 的！</p> <p>4. 配置.travis.yml，内容在上一节已经讲过了。直接跑的 npm run cover 。</p> <h3><strong>2.3、结果展示</strong></h3> <p>代码重新push上去之前在ReadMe文件中再添加一个徽章： [](https://coveralls.io/github/linxiaowu66/douMiBlogPlatform?branch=master)</p> <p>徽章的代码获取是在你的项目页面下：</p> <p><img src="https://simg.open-open.com/show/fc69844490b205443a8ed52e00c9c24e.png"></p> <p>命令行结果：</p> <p><img src="https://simg.open-open.com/show/eca1db690753d0f7a4476e670a00f84c.png"></p> <h2><strong>3、GA&&stability&&Liscence</strong></h2> <p>在添加GA和stability这两个徽章，GA的操作步骤在GA的项目ReadMe文件中写的很详细： <a href="/misc/goto?guid=4959631426046793303" rel="nofollow,noindex">https://github.com/igrigorik/ga-beacon</a> .</p> <p>stability则可以直接写到你的ReadMe文件中：</p> <pre> [](https://github.com/igrigorik/ga-beacon) [](http://github.com/badges/stability-badges)</pre> <p>License也是类似：</p> <p>[](https://opensource.org/licenses/mit-license.php)</p> <h2><strong>4、bitHound</strong></h2> <p>Nodejs的代码分析工具，非常实用的一个在线code review工具。同理我们使用github账号登录，引入你的项目，在你的项目中新建 .bithoundrc 文件：</p> <pre> { "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/**" ] }</pre> <p>之后你便可以提交代码，bithound会监听你的github项目的变化，从而触发新的代码检测，检测完毕之后便可以在下面的页面找到好多徽章：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/fb8cff8941d31c59a03d6ecbd38b02d4.png"></p> <p>于是你又可以在ReadMe 文件中添加下面4个徽章：</p> <pre> [](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform) [](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/master/dependencies/npm) [](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform/master/dependencies/npm) [](https://www.bithound.io/github/linxiaowu66/douMiBlogPlatform) [](https://opensource.org/licenses/mit-license.php)</pre> <p>至此目前项目的徽章就添加完毕了，说了这么多并不是说只是单纯地添加这些徽章来酷炫展示，更重要的是提高项目的健壮性，所以对于单元测试不够的或者代码检查有问题的都是需要花心思去修改这些的。同时项目的不同使用的徽章也是不一样的，大家应该选择适合自己项目的。</p> <h2><strong>参考：</strong></h2> <ol> <li><a href="/misc/goto?guid=4959724754400875757" rel="nofollow,noindex">http://efe.baidu.com/blog/front-end-continuous-integration-tools/</a></li> <li><a href="/misc/goto?guid=4959724754494217159" rel="nofollow,noindex">http://www.imooc.com/article/details/id/2319</a></li> <li><a href="/misc/goto?guid=4959724754585843803" rel="nofollow,noindex">http://blog.csdn.net/u011192270/article/details/51788886</a></li> </ol> <p> </p> <p>来自：http://tech.dianwoda.com/2016/11/10/ru-he-rang-ni-de-githubxiang-mu-geng-jia-gao-da-shang/</p> <p> </p>