前端持续集成 Travis-CI 自动化部署到 Github 个人主页

目标

当我们 push 代码到指定分支(我们这里就指定 master)的时候，可以自动触发构建到 GitHub Pages
获得构建徽章和测试覆盖率徽章

准备

一个公有的 github 项目
使用 github 账号登录 travis.org

添加项目

配置 .travis.yml 文件

在你的项目根目录增加一个 .travis.yml 文件，初始化配置可如下：

# .travis.yml
language: node_js # 前端工程所以是JavaScript，编译环境是node_js
git:
  depth: 1 # 仅克隆最新的 commit
node_js:
  - 'lts/*' # 指定 node.js 版本
branchs:
  only:
    - master # 指定只有检测到master分支有变动时才执行git 任务

🎉🎉🎉 到此，当我们提交代码到 master 分支，travis 虚拟机就会开始跑文件中配置的任务。这里可以看到本次构建的详情

当运行一个 language 为 node_js 的项目时，默认脚本是 npm test，所以你可能会看到 travis 自己执行了 npm test 命令，详情见这里

由于我们配置简单，整体任务通过不报错，就会显示 passing 状态，但这不是我们的目标，我们得让 travis 做些事儿。

配置 Codecov

在项目中安装 codecov

    npm i --save codecov

这里有个小点，你可能在其他教程会看到，需要给 travis 再配置一个Codecov 的环境变量，其实不需要的，你会发现没有这个环境变量也能上传测试报告。在项目下 ./node_modules/.bin/codecov 文件，找到了相关说明 - 公有项目不需要 codcov token。

在 angular项目中， npm test 默认会起一个测试服务，并一直处于 watch 状态，导致这个 travis 任务不会结束。所以，我们需要修改 package.json 中 test 脚本，修改如下：

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href /my-github/ --prod",
    "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

--code-coverage 参数会生成测试报告，--browsers=ChromeHeadlessCI 可以后台运行浏览器

最后需要去到 karma.conf.js 修改下配置，加上 customLaunchers

    autoWatch: true,
    browsers: ['Chrome'],
    customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    },

获取 github token

在 github.com/settings/to… 新生成一个token，权限配置可参考下图：

创建后先把 token 复制下来，因为下次再进入页面，github 不会再显示 token，应该是为了安全吧。

将生成的 token 作为环境变量配置到 travis

我们创建了一个 GITHUB_TOKEN 的环境变量，值为刚生成的 token

准备就绪，让我们最后来配置下 .travis.yml

修改 .travis.yml 文件

# .travis.yml
language: node_js # 前端工程所以是JavaScript，编译环境是node_js
git:
  depth: 1 # 仅克隆最新的 commit
node_js:
  - 'lts/*' # 指定 node.js 版本
env:
  global: GITHUB_TOKEN=$GITHUB_TOKEN # 仅克隆最新的 commit
branchs:
  only:
    - master # 指定只有检测到master分支有变动时才执行任务
install:
  - npm i # 克隆完项目后，安装
script:
  - npm run test # 生成测试报告
  - npm run build # 打包生成静态资源
after_script:
  - if [[ "$TRAVIS_TEST_RESULT" == 0 ]]; then ./node_modules/.bin/codecov; fi # 执行完 travis 测试任务无报错后上传报告
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN # travis setting 中的环境变量 GITHUB_TOKEN
  local-dir: ./dist/my-github # 根据情况自定义到静态文件输出目录
  target-branch: gh-pages # 构建后的静态资源提交到这个分支
  verbose: true
  on:
    branch: master

配置文件已经注释，有问题可以评论交流，也可以通过这里看构建详情。也可以参考中的demo项目

下篇文章会继续介绍，Travis-CI 自动化部署到服务器。

前端持续集成 Travis-CI 自动化部署到 Github 个人主页

相关介绍

1. 徽章

2. Travis-CI

3. Codecov

4. Github 个人主页

目标

准备

添加项目

配置 .travis.yml 文件

配置 Codecov

获取 github token

修改 .travis.yml 文件