使用Travis CI尝试前端的持续集成

前端的持续集成

在软件工程中，持续集成（CI）指的是屡次小幅度的将开发的代码合并到主干（个人理解这个主干是相似于dev的测试环境代码）的作法。在合并以前，须要作一些测试和构建的步骤，经过了以后就能够将新代码"集成"到主干。

结合我自身的真实状况，就是我有一个演示项目（使用的GitHub pages）开源在GitHub，每次须要作点升级都须要从新build，而后把buil生成的的静态文件提交到GitHub。这就致使了不少的重复性工做。

例若有时候我只是修改一行文本，可是也须要本身手动build和提交。如今我想只是修改源码并提交，build和提交build后的静态文件交给Bot去完成。

Travis CI

Github上面的开源项目使用Travis CI提供的持续集成服务（Continuous Integration，简称 CI）是很是方便的。

首先你得有个GitHub帐号和项目，而后去travis-ci官方网站使用GitHub受权登陆。在setting里激活某个仓库，一旦激活了一个仓库，Travis 会监听这个仓库的全部变化。

登陆GitHub，在最右侧下拉中点击setting，而后按顺序点击Developer settings和Personal access tokens。继续找到Generate new token生成新的token，以下图所示，我把能点的都点上了，只有一个delete_repo没有受权。这个token要保存下，离开页面之后就看不到了，只能从新生成。

在travis-c打开激活的仓库setting，添加1个环境变量，分别是GITHUB_TOKEN。GITHUB_TOKEN是咱们刚刚在GitHub上面的受权token，基本全部权限都给了。

编写.travis.yml

准备工做完毕后，在项目的根目录新建.travis.yml文件，这是配置和脚本文件，指定了 Travis 的行为。该文件必须保存在项目的根目录 ，一旦代码仓库有新的 Commit，Travis 就会去找这个文件，按照配置执行里面的命令。

这里说下我想实现的基本步骤：

1. 我修改源码或者升级某个node包，提交到GitHub
2. Travis 获得消息后，clone最新的代码
3. 使用yarn执行安装和build
4. 将全部文件的变化提交到GitHub

下面介绍下.travis.yml文件：

# 语言
language: node_js
# 版本,这里指定的是最新的lts版
node_js: lts/*
# 要最新的就行，因此克隆最近的一次commit
git:
  depth: 1
# 安装
install: yarn
# 指定了缓存的内容，这里是yarn安装的东西，既node_modules
cache: yarn
# build
script: yarn build
# build成功后开始部署，下面是travis-ci提供的一些比较便捷的写法，针对GitHub pages的
deploy:
  # 这里指定了GitHub的pages服务
  provider: pages
  # Make sure you have skip_cleanup set to true, otherwise Travis CI will delete all the files created during the build,
  # which will probably delete what you are trying to upload.
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  # 这里须要是true，不然会git push --force，把之前的记录覆盖了
  keep_history: true
  # 使用GitHub的用户名和邮箱
  committer_from_gh: true
  # 目标分支
  target_branch: master
  on:
    branch: master
复制代码

GitHub的pages服务只能指定在master分支的根目录或者docs，我这里使用的是放在docs，根目录还须要存放源码。

这样只要我提交了一些更新，Bot就会build一次，没有变更的话就不提交，有变化的话就会自动push到GitHub。这一步暂时还不能自定义commit message。下图中docs文件夹的提交就是Bot作的。

能够查看项目的真实记录

下面贴出bot自动执行的部分log

3.22s$ nvm install lts/*
cache.1
Setting up build cache
cache.yarn
cache.npm
$ node --version
v12.13.0
$ npm --version
6.12.0
$ nvm --version
0.35.1
$ yarn --version
1.15.2
install
1.09s$ yarn
8.68s$ yarn build
yarn run v1.15.2
$ vue-cli-service build
      
Done in 8.52s.
The command "yarn build" exited with 0.
cache.2
store build cache
dpl_0
2.03s$ rvm $(travis_internal_ruby) --fuzzy do ruby -S gem install dpl
7.84s
dpl.1
Installing deploy dependencies
Logged in as @hezhongfeng (hezf)
dpl.2
Preparing deploy
dpl.3
Deploying application
Done. Your build exited with 0.
复制代码

自定义行为

若是想经过commit message去控制Bot的行为，能够在脚本里进行判断。 script: if [[ $TRAVIS_COMMIT_MESSAGE == *"trigger build"* ]]; then mvn install ; fi ;

整体速度仍是很快的，整个build+提交的时间在1分钟多一点。之后都不用我手动build和提交了。

gitlab上面也有类似的GitLab CI/CD，应该是差很少的，暂时先不作过多研究。