概念

既然我们要使用 Travis CI ，首先得搞清楚人家具体是干嘛的吧？

Travis CI 是一个 **持续集成(Continuous integration, CI)**。它与 git 相耦合，每当有 commit 提交时，它将自动触发构建与测试。若运行结果符合预期，才将新代码集成到 主流(mainline) 中，这样使应用更加健壮。

值得注意的是， Travis CI 提倡每次 commit 都是独立较小的改动，而不是突然提交一大堆代码。因为这有助于后续构建失败时可以回退到正常的版本。

运行构建时， Travis CI 将 GitHub 存储库克隆到全新的虚拟环境中，并执行一系列任务来构建和测试代码。如果这些任务中的一项或多项失败，则将构建视为已损坏。如果所有任务均未失败，则认为构建已通过， Travis CI 会将代码部署到 Web 服务器或应用程序主机中(在本文中是指 Github Pages 服务)。

准备

在使用之前，需要准备一个 Github 的账号对 Travis CI 进行授权。

1. 接着通过 Github 的账号登录 Travis CI ，点击 SIGN IN WITH GITHUB 。
2. 点击后会被重定向到 Github 进行授权。
3. 授权后，若是第一次登录的话会被重定向至 引导页 :
4. 点击引导页第一步的按钮，使用 GitHub Apps 激活储存库。可以选择给全部储存库都激活，也可以激活指定储存库。本文以 <username>.github.io 为例:

   注意: 这个 username 是你自己的 Github 用户名。笔者的 username 为 anran758 那储存库的名字就为 ** anran758.github.io **。

   
5. 激活后会被重定向到 设置页 ，点击待部署的储存库右侧的 setting 按钮，跳转至 Travis CI 储存库设置页。我们需要在此页设置部署 Github Pages 时所需的环境变量:

环境变量的值需要从 Github 拿 拥有部署权限的 token :

1. 打开 Github ，点击头像，再点击 Settings 进入设置页：
2. 进入设置页面后在左侧边栏点击 开发者设置 :
3. 跳转后在左侧边栏点击 Personal access tokens , 然后在头部点击 Generate new token :
4. 填写 token 备注、权限，最后点击生成 token:
5. 生成 token 后点击复制按钮，复制到粘贴板: 注意要妥善保管好 token，重新刷新页面后这个 token 将不会再展示出来。如果忘记了 token 的话，也只能在 token 编辑页中重新生成。这会导致所有用到该 token 的应用都要更新值。 比方说有三个应用使用了该 token，重新生成后只在一个应用更新的值，那其他两个应用不更新就无法使用了。
6. 复制 token 后切回 Travis CI 储存库的设置页，添加环境变量:

这样我们的准备工作就完成的差不多了。

配置

在项目目录中新建文件 .travis.yml ，内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

language: node_js
node_js:
  - lts/*

install:
  - yarn install # npm ci
script:
  - yarn test # npm run test
  - yarn build # npm run build

deploy:
  provider: pages
  local_dir: dist
  target_branch: master
  on:
    branch: develop
  token: $GITHUB_TOKEN
  skip_cleanup: true
  keep_history: true
  committer_from_gh: true

由于 webpack 项目依赖 Node.js，因此语言( language ) 设置为 node_js ，同时还指定使用最新的 LTS Node.js 版本( lts/* )。

install 是安装部署所需的依赖项， script 则是用于运行测试或构建脚本。他们都是 Travis 的工作生命周期(Job Lifecycle)必触发的钩子(阶段)。

install 钩子若有脚本/命令运行失败的话，整个构建会停止。而 script 钩子表现则不同，当有脚本/命令运行失败后虽然构建会失败，但还会继续执行后面的脚本。如 yarn test 运行失败后会继续跑 yarn build 命令。

以下是 Travis CI 主要的阶段流程图:

graph TD
A[before_install] --> B[install]
A & B -.-> Z((停止构建))
B --> C[before_script]
C --> D[scrip]
D --> E(after_success)