测试笔记 (七) 持续集成 (Travis CI) 以及那些Badge

阅读7757评论26

一, 简介

1, 持续集成: Continuous integration,简称CI
参考文章: 持续集成是什么?

2, Travis: Travis CI是一个持续集成的托管服务。目前已经集成Github
参考文章: 持续集成平台:travis

3, 经常在一些项目中看到一些Badge,接下来会一步步添加这些Badge build status Dependency Status devDependency Status Coverage Status

二, 配置并集成Travis

1, 用github账号登录Travis,同步你的github项目,并开启要使用travis build的项目.

2, 在项目添加.travis.yml文件,并配置好. 文档地址:http://docs.travis-ci.com/user/languages/javascript-with-nodejs/

测试笔记 (六) 使用gulp管理测试任务 这篇文章样例做为基础.我们已经做好了gulp来运行测试,但是还要做一下修改,将karma测试浏览器由chrome改为phantomjs.

npm i phantomjs karma-phantomjs-launcher --save-dev

并修改配置karma.conf.js

 // 运行测试的浏览器,需要安装插件
 browsers: ['PhantomJS'],   //改为PhantomJS

接下来添加.travis.yml配置如下:

language: node_js
node_js:
  - "4.1"
  - "4.0"
  - "0.12"
  - "iojs"
before_script:
  - npm install -g gulp bower
  - bower install --config.interactive=false
script: gulp

language 和 node_js:告诉 Travis CI 这个项目是一个 Node.js 项目,并指定需要测试 v4.1.0, v4.0.0, v0.12,和iojs,iojs将运行最新的稳定版本.
before_script 默认将执行 npm install, 由于我们这个测试项目是前后整在一起的,而且需要用来gulp,所以需要安装gulp,bower以及bower安装相关依赖.
script 用来构建的命令.

3, push到github仓库,就会触发Travis构建.
我们配置了四个版本,当push到github时, Travis CI将开始对四个版本分别构建.. 而且整个过程是实时可见的.
如本文项目地址,如图所示: travis
点击右面图标,可查看图标地址,将它添加到README.md文件 Build Status

三,添加测试覆盖率工具Coveralls

1, 用github账号登录Coveralls,并添加要使用Coveralls的项目

2, 在.travis.yml中集成coveralls 为了更方便的集成coveralls,我们先安装一个gulp插件

npm i --save-dev gulp-coveralls 

然后再添加一个gulp任务

//coveralls
gulp.task('coveralls',function () {
	gulp.src(path.join(config.istanbul, '/lcov.info'))
		.pipe($.coveralls());
});

再修改.travis.yml 在最后增加一行

after_script: gulp coveralls

再build之后扫行 gulp coveralls任务,将istanbul生成的报告,发送给coveralls.

3, 再次push到github,等待travis build完成. 再到coveralls网站项目地址查看,如图: coveralls
点击BADGE URLS 按钮即可查看图标地址.修改README.md文件,将图标添加进去. Coverage Status

三,添加项目依赖图标David

1, 进入https://david-dm.org/并用github账号登录. 2, 进入你在它网站上项目主页如:https://david-dm.org/jackhutu/test-example 即可查看到,你的项目中DEPENDENCIES和DEVDEPENDENCIES 的情况.如图:
david 点击右面图标可查看图标地址.它用三种图标背景颜色来提示.
绿色: 表示依赖都是最新版
黄色: 表示依赖项目小版本不是最新了 红色: 表示依赖项目已经有了大版本更新了.
3, 将DEPENDENCIES和DEVDEPENDENCIES的图标添加到README.md Dependency Status devDependency Status

最后将最新的README.md文件push到github项目中,看看我们的图标是否显示正常. README.md
项目立马上了一个登次.

更多图标:http://shields.io/
本文样例下载地址:https://github.com/jackhutu/test-example/tree/travis-test

26条评论添加新评论
黑子黑子2015.10.6 1:4

fhgfh

俊峰1@黑子 这是什么东西

elevenskyelevensky2016.1.22 8:58

牛逼

liu超oliu超o2016.1.28 14:59

ll

TuuCaiTuuCai2016.1.31 1:28

????

蚀生蚀生2016.2.23 7:53

666666

大内低手大内低手2016.2.29 6:18

gggg

MonkuuMonkuu2016.3.1 3:48

http://shields.io 上面其他的图标怎么设置?在页首输入github的项目链接后,suggest出来的图标只有github的,其他像Build, Downloads, Version 都没有,这些怎么设置?谢谢!

Jack@Monkuu 很好设置啊. 它上面有markdown格式, 复制粘贴,再加个链接就行了.

441953309fdafdafda

441953309@441953309 fdafda

441953309@Jack ffdsfda

441953309@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com

441953309@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com@441953309 ffffff fdafd fd af da fda f as f ads http://www.baidu.com

441953309@Monkuu fda

夜神月@441953309 asdfasd

LibiLibi2016.3.15 1:42

asd

LibiLibi2016.3.15 1:43

asdf

逆袭&希望@Libi hello

liu超o@逆袭&希望 sd

Amyc-Amyc-2016.3.17 3:43

你好,本来想在vue论坛中你发布的博客帖子中回复你的,但是回不了,就找到这里了。向你请教个问题,请问你是如何让网站做到响应式布局的?是手机端和PC端路由到不同的页面还是Vue本身就支持响应式布局?

Jack@Amyc- 响应式布局和vue没有关系, 它是属于CSS部分, 手机端和PC端跑的是同一套代码,根据设备屏幕尺寸显示不同的样式.

Amyc-@Jack 原来是这样,非常感谢撒~~!

4419533094419533092016.3.17 14:50

aaa

441953309@441953309 aaa

4419533094419533092016.3.17 14:53

ff

Milly12323

4419533094419533092016.3.17 14:53

ff

guozhguozh2016.3.18 2:13

000

VuerVuer2016.3.22 10:8

真牛!

VuerVuer2016.3.22 10:8

大神,你QQ有吗?

Jack@Vuer QQ很少上哦.

MichaelMichael2016.7.1 4:17

第一眼看像简书,太6了,看你的github上的项目相信会有收获。

true blue1true blue12016.7.12 6:58

good

joethjoeth2016.7.19 2:14

)*&^%@~@#%^&*&^%$#@!!~$%^&*P(&\/

joethjoeth2016.7.19 2:16

z

sandy-串串sandy-串串2016.8.2 1:49

学习 学习

俊峰1俊峰12016.9.5 6:33

太牛了,学习此项目

俊峰1俊峰12016.9.5 6:34

大神,你的项目注释好少

xiashengxiasheng2016.12.30 6:3

; ‘; ’

tianjiantnt2tianjiantnt22017.3.16 11:33

学习了

maruco2020maruco20202017.12.12 9:10

3453546546546