Continuous Integration

持續(xù)集成

One of the best ways to keep your project bug free is through a test suite, but it's easy to forget
to run tests all the time.
保持項(xiàng)目缺陷肅清的最好方法之一是通過(guò)測(cè)試套件，但忘記隨時(shí)運(yùn)行測(cè)試很容易。

That's where Continuous Integration (CI) servers come in.
You can set up your project repository so that your tests run on every commit and pull request.
這就是持續(xù)集成（CI）服務(wù)器的用武之地。您可以設(shè)置您的項(xiàng)目存儲(chǔ)庫(kù)，以便您的測(cè)試可以在每次提交和提交請(qǐng)求時(shí)運(yùn)行。

There are paid CI services like Circle CI and
Travis CI, and you can also host your own for free using
Jenkins and others.
有付費(fèi)的CI服務(wù)，如Circle CI和Travis CI，您也可以使用Jenkins和其他人免費(fèi)托管項(xiàng)目的服務(wù)。

Even though Circle CI and Travis CI are paid services, they are provided free for open source
projects.
You can create a public project on GitHub and add these services without paying.
盡管Circle CI和Travis CI是有償服務(wù)，但它們是免費(fèi)提供給開(kāi)源項(xiàng)目的。您可以在GitHub上創(chuàng)建一個(gè)公共項(xiàng)目并添加這些服務(wù)而無(wú)需付費(fèi)。
We're going to see how to update your test configuration to run in CI environments, and how to
set up Circle CI and Travis CI.
我們將看到如何更新測(cè)試配置以在CI環(huán)境中運(yùn)行，以及如何設(shè)置Circle CI和Travis CI。

Update test configuration

更新測(cè)試配置

Even though ng test and ng e2e already run on your environment, they need to be adjusted to
run in CI environments.
即使 ng test 和 ng e2e 已經(jīng)在您的環(huán)境中運(yùn)行，它們也需要進(jìn)行調(diào)整才能在CI環(huán)境中運(yùn)行。

When using Chrome in CI environments it has to be started without sandboxing.
We can achieve that by editing our test configs.
在CI環(huán)境中使用Chrome時(shí)，必須在不使用沙箱的情況下啟動(dòng)。我們可以通過(guò)編輯我們的測(cè)試配置來(lái)實(shí)現(xiàn)這一點(diǎn)。

In karma.conf.js, add a custom launcher called ChromeNoSandbox below browsers:
在 karma.conf.js 中, 添加一個(gè)自定義啟動(dòng) ChromeNoSandbox 在 browsers:

browsers: ['Chrome'],
customLaunchers: {
  ChromeNoSandbox: {
    base: 'Chrome',
    flags: ['--no-sandbox']
  }
},

Create a new file in the root of your project called protractor-ci.conf.js, that extends
the original protractor.conf.js:
在項(xiàng)目根目錄創(chuàng)建一個(gè)文件命名為 protractor-ci.conf.js, 擴(kuò)展內(nèi) protractor.conf.js:

const config = require('./protractor.conf').config;

config.capabilities = {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--no-sandbox']
  }
};

exports.config = config;

Now you can run the following commands to use the --no-sandbox flag:
現(xiàn)在可以運(yùn)行以下命令來(lái)使用 --no-sandbox 標(biāo)志:

ng test --single-run --no-progress --browser=ChromeNoSandbox
ng e2e --no-progress --config=protractor-ci.conf.js

For CI environments it's also a good idea to disable progress reporting (via --no-progress)
to avoid spamming the server log with progress messages.
對(duì)于CI環(huán)境，禁用進(jìn)度報(bào)告 (via --no-progress) 也是一個(gè)好主意，以避免使用進(jìn)度消息來(lái)垃圾郵件服務(wù)器日志。

Using Circle CI

使用 Circle CI

Create a folder called .circleci at the project root, and inside of it create a file called
config.yml:
在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 .circleci 的文件夾，并在其中創(chuàng)建一個(gè)名為 config.yml 的文件：

version: 2
jobs:
  build:
    working_directory: ~/my-project
    docker:
      - image: circleci/node:8-browsers
    steps:
      - checkout
      - restore_cache:
          key: my-project-{{ .Branch }}-{{ checksum "package.json" }}
      - run: npm install
      - save_cache:
          key: my-project-{{ .Branch }}-{{ checksum "package.json" }}
          paths:
            - "node_modules"
      - run: xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox
      - run: xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js

We're doing a few things here:
我們?cè)谶@里做了幾件事:

• node_modules is cached.
  緩存 node_modules.
• npm run is used to run ng because @angular/cli is
  not installed globally. The double dash (--) is needed to pass arguments into the npm script.
  npm run用于運(yùn)行 ng，因?yàn)?@angular/cli 沒(méi)有全局安裝。 需要雙短劃線（ -- ）將參數(shù)傳遞給npm腳本。
• xvfb-run is used to run npm run to run a command using a virtual screen, which is needed by
  Chrome.
  xvfb-run 用于運(yùn)行 npm run 以使用Chrome需要的虛擬屏幕運(yùn)行命令。

Commit your changes and push them to your repository.
提交更改并將其推送到您的存儲(chǔ)庫(kù)。

Next you'll need to sign up for Circle CI and
add your project.
Your project should start building.
接下來(lái)，您需要注冊(cè)Circle CI并添加您的項(xiàng)目。你的項(xiàng)目應(yīng)該開(kāi)始建設(shè)。

Be sure to check out the Circle CI docs if you want to know more.
如果您想了解更多信息，請(qǐng)務(wù)必查看Circle CI docs文檔。

Using Travis CI

使用 Travis CI

Create a file called .travis.yml at the project root:
在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為.travis.yml的文件：

dist: trusty
sudo: false

language: node_js
node_js:
  - "8"
  
addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

cache:
  directories:
     - ./node_modules

install:
  - npm install

script:
  # Use Chromium instead of Chrome.
  - export CHROME_BIN=chromium-browser
  - xvfb-run -a npm run test -- --single-run --no-progress --browser=ChromeNoSandbox
  - xvfb-run -a npm run e2e -- --no-progress --config=protractor-ci.conf.js

Although the syntax is different, we're mostly doing the same steps as were done in the
Circle CI config.
The only difference is that Travis doesn't come with Chrome, so we use Chromium instead.
雖然語(yǔ)法不同，但我們主要執(zhí)行與Circle CI配置中完成的相同步驟。唯一的區(qū)別是Travis沒(méi)有配備Chrome，所以我們使用Chromium。

Commit your changes and push them to your repository.
提交更改并將其推送到您的存儲(chǔ)庫(kù)。

Next you'll need to sign up for Travis CI and
add your project.
You'll need to push a new commit to trigger a build.
接下來(lái)，您需要注冊(cè) Travis CI 并 添加您的項(xiàng)目 。您需要推送新的提交來(lái)觸發(fā)構(gòu)建。

Be sure to check out the Travis CI docs if you want to know more.
如果您想了解更多信息，請(qǐng)務(wù)必查看Travis CI文檔。