使用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，应该是差不多的，暂时先不做过多研究。