乐趣区

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

jiezi

前端的持续集成

在软件工程中，持续集成（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，应该是差不多的，暂时先不做过多研究。

退出移动版