Angular Cli 内置的开箱即用的工具可以创建、构建、测试应用。本文中，将使用 Github Actions 构建一个持续集成（CI）构建系统。

可以实现推送更新到仓库时，CI 将运行以构建应用。

开始之前在 package.json 文件中添加一些用来在 CI 运行构建是执行的 script。

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "clean": "rimraf ./dist",
  "build:prod": "ng build --prod",
  "build:ci": "npm run clean && npm run build:prod"
}

...

集成 Angular CLI 与 Github Actions

通过在项目中创建构建脚本或 “Actions” 来运行 CI 构建。

在项目根目录下创建一个新目录 .github/workflows/ 以创建 actions。

在新创建的目录中可以创建多个新的构建操作，先创建一个简单的 build.yml 文件。

build.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
name: Github Actions Build
on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]

    steps:
      - uses: actions/checkout@v1

      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 
          restore-keys: |
           ${{ runner.os }}-node- 
      - name: Node ${{ matrix.node-version }} 
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }} 
      - name: npm ci and npm run build
        run: |
          npm ci
          npm run build:ci

build.yml 定义了一个 action 名称以及何时应运行的触发器。在示例中，只要推送更新到 master 分支，action 就会运行。还可以将配置改为运行更复杂的方案，例如 pull requests 和 branches。

定义触发器后，就可以定义要运行的 jobs。在示例中使用 Ubuntu Linux 环境运行 jobs，定义要运行的 Node.js。

配置好环境后，就可以定义构建步骤了。

在每次构建时都重新安装 npm 包会降低构建速度，所以在配置中通过缓存 npm node_modules 来优化构建速度。这个步骤可以跟踪 package-lock.json 文件的任何更新，如果跟上一次更改没有任何差异，则直接使用之前版本的 npm 缓存。

先注销正在运行的 Node 版本，然后按照 NPM 包。安装完成后，运行命令 npm run build:ci 来构建项目。

现在，推送更新到 master 分支，然后打开 Github 仓库 Actions 标签页，查看构建状态和日志。

为了能更直观的在仓库首页查看项目的构建状态，可以把构建状态 Badge 添加到 README.md 文件中。

README.md

1
2
3
4
5
...

[![build status](https://github.com/{github_id}/{repository}/workflows/{workflow_name}/badge.svg)](https://github.com/{github_id}/{repository}/actions)

...