travisCI 持续集成 gh-page 并部署

2018-06-13 admin

介绍

我们大多数公司在做项目时,应该都碰到过,当代码被 push 上 git 或者是 svn 时,过几分钟就可以在线上实时看到我们的项目,就像看到亲生儿子一样,但是肯定很多人不知道这是怎么实现的(如果你知道,那可以不用往下看了,点个赞就去吃饭吧…),所以今天我就来给大家介绍一下其中的一款 travis-CI,请记住它的 face:

持续集成(Continuous integration)的核心思想,代码先自动化测试用例,通过后集成到主干。它细分的话有两个概念:

简单来说持续部署是持续交付的下一步,持续交付是测试阶段,部署就是测试通过阶段。,这个就有很多东西展开了,求我我就告诉你…

准备

  • GitHub 账号(作为一个合格的程序员,你没有真的好吗?)
  • travis-CI 平台接入
  • GITHUB_TOKEN
  • 给我点赞…

第一步

登录 CI 官网,然后连接自己的 gitHub,这个时候 Legacy Services Integration 应该默认显示了几个自己gitHub的项目 如果显示不全,可以按左边的 sync 同步一下 然后第一张图每个项目的边上有一个 switch 开关,你想要让哪个集成就打开哪个吧(不截图了,我懒…)

第二步

进入自己的 gh 主页,依次:GitHub settings -> developer settings -> Personal access tokens,勾选权限,自由发挥,你要全勾也行…

将生成的 token 复制备用

第三步

回到CI,打开你打开开关的那个项目的 settings(看到你很绕我就放心了…),进入配置页面,在 Environment Variables 里填入以下内容:

分别对应:git项目、项目分支(我这里的分支是gh-pages)、token、Git-email、Git-username

第四步

在项目根目录配置个文件叫 .travis.yml,打包项目以vue-cli为例,内容如下:

language: node_js
# nodejs版本
node_js:
    - '8.9.1'

# S: Build Lifecycle
install:
  - npm install
script:
  - npm run build

# 这个是不是看着很熟悉?
after_script:
  - cd ./dist
  - git init
  - git config user.name "${USER_NAME}"
  - git config user.email "${USER_EMAIL}"
  - git add .
  - git commit -m "blog.jzxer.cn"
  - git push --force --quiet "https://${test_token}@${GH_REF}" master:${P_BRANCH}
# E: Build LifeCycle

# 只对某个分支行为生效
branches:
  only:
    - master

第四点

打开 CI,进入自己构建项目的那个页面,打开 job log,感受那生怕 error 的快感!(都是泪…)

当然如果你通过的话,就会有一个 passing 在你的项目标题旁边。

每次看到这个我都激动的热泪盈眶…

第五步

看一下自己在git上的项目,是不是出现了这个分支,并且已经自动部署好了?成功的截图。

部署好的页面

后记

现在,你可以疯狂的 push 代码了,其他的事交给 CI 去做就行。

好了,码了这么久的字,你是不是应该:

点个赞?

个赞?

赞?

👍

原文链接:https://segmentfault.com/a/1190000015274243

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33940.html

文章标题:travisCI 持续集成 gh-page 并部署

相关文章
JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例。分享给大家供大家参考。具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) 运行...
2017-03-29
angularjs客户端实现压缩图片文件并上传实例
主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function(...
2017-03-27
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
首先给大家展示演示效果: 基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好,IE/火狐等众多浏览器下运行稳定、反应快速。代码表现方面,简洁务实,不玩虚...
2017-03-29
JavaScript实现自动弹出窗口并自动关闭窗口的方法
本文实例讲述了JavaScript实现自动弹出窗口并自动关闭窗口的方法。分享给大家供大家参考。具体如下: 这里介绍的JavaScript自动弹出窗口并自动关闭窗口,JS实现此特效似乎很简单,打开网页后即显示一个弹出窗口,之后会自动离开,使用...
2017-03-27
Vue.js中用webpack合并打包多个组件并实现按需加载
前言 随着移动设备的升级、网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码。webpack作为一种...
2017-03-16
javascript实现可拖动变色并关闭层窗口实例
本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法。分享给大家供大家参考。具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果...
2017-03-23
javascript判断并获取注册表中可信任站点的方法
本文实例讲述了javascript判断并获取注册表中可信任站点的方法。分享给大家供大家参考。具体分析如下: 判断可信任站点,首先要在注册表中找到可信任站点在注册表中的位置,如下: (1)域名作为可信任站点在注册表中的位置: HKCU\Sof...
2017-03-23
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
本文实例讲述了JavaScript弹出新窗口并控制窗口移动到指定位置的方法。分享给大家供大家参考。具体如下: 下面的JS代码通过window.open弹出一个新窗口,然后通过JS代码控制窗口移动到指定的位置 <!DOCTYPE htm...
2017-03-22
利用nodejs监控文件变化并使用sftp上传到服务器
最近在用react+express做一个自己的工具型网站(其实就是夺宝岛抢拍器) 然后因为经常要改动,而且又要放到服务器上进行测试。总是要webpack,然后手动把文件上传上去,不胜其烦,索性搜索了下,直接写个能检测文件变化并自动进行上传的...
2017-03-17
express + mock 让前后台并行开发
在我们平时项目刚启动时,由于后台也是刚开始开发,我们前端往往在开发过程中没有数据和接口请求的,都要造一些假数据进去或者使用mock造一些数据进去,但是这样的话往往会偶合一些没用的代码进去。到时候还得删除。 前后需要先商量好数据格式,等等...
2018-06-05
回到顶部