travisCI 持续集成 gh-page 并部署

介绍

咱们大多数公司在作项目时，应该都碰到过，当代码被 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 去作就行。

好了，码了这么久的字，你是否是应该：

点个赞？

个赞？

赞？

👍

原文连接：http://blog.jzxer.cn