angular-cli持续集成

Continuous Integration

持续集成

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.
保持项目缺陷肃清的最好方法之一是通过测试套件,但忘记随时运行测试很容易。

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.
这就是持续集成(CI)服务器的用武之地。您可以设置您的项目存储库,以便您的测试可以在每次提交和提交请求时运行。

There are paid CI services like Circle CI and
Travis CI, and you can also host your own for free using
Jenkins and others.
有付费的CI服务,如Circle CITravis CI,您也可以使用Jenkins和其他人免费托管项目的服务。

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是有偿服务,但它们是免费提供给开源项目的。您可以在GitHub上创建一个公共项目并添加这些服务而无需付费。
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.
我们将看到如何更新测试配置以在CI环境中运行,以及如何设置Circle CI和Travis CI。

Update test configuration

更新测试配置

Even though ng test and ng e2e already run on your environment, they need to be adjusted to
run in CI environments.
即使 ng testng e2e 已经在您的环境中运行,它们也需要进行调整才能在CI环境中运行。

When using Chrome in CI environments it has to be started without sandboxing.
We can achieve that by editing our test configs.
在CI环境中使用Chrome时,必须在不使用沙箱的情况下启动。我们可以通过编辑我们的测试配置来实现这一点。

In karma.conf.js, add a custom launcher called ChromeNoSandbox below browsers:
karma.conf.js 中, 添加一个自定义启动 ChromeNoSandboxbrowsers:

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:
在项目根目录创建一个文件命名为 protractor-ci.conf.js, 扩展内 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:
现在可以运行以下命令来使用 --no-sandbox 标志:

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.
对于CI环境,禁用进度报告 (via --no-progress) 也是一个好主意,以避免使用进度消息来垃圾邮件服务器日志。

Using Circle CI

使用 Circle CI

Create a folder called .circleci at the project root, and inside of it create a file called
config.yml:
在项目根目录下创建一个名为 .circleci 的文件夹,并在其中创建一个名为 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:
我们在这里做了几件事:

  • 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用于运行 ng,因为 @angular/cli 没有全局安装。 需要双短划线( -- )将参数传递给npm脚本。
  • xvfb-run is used to run npm run to run a command using a virtual screen, which is needed by
    Chrome.
    xvfb-run 用于运行 npm run 以使用Chrome需要的虚拟屏幕运行命令。

Commit your changes and push them to your repository.
提交更改并将其推送到您的存储库。

Next you'll need to sign up for Circle CI and
add your project.
Your project should start building.
接下来,您需要注册Circle CI并添加您的项目。你的项目应该开始建设。

Be sure to check out the Circle CI docs if you want to know more.
如果您想了解更多信息,请务必查看Circle CI docs文档。

Using Travis CI

使用 Travis CI

Create a file called .travis.yml at the project root:
在项目根目录下创建一个名为.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.
虽然语法不同,但我们主要执行与Circle CI配置中完成的相同步骤。唯一的区别是Travis没有配备Chrome,所以我们使用Chromium。

Commit your changes and push them to your repository.
提交更改并将其推送到您的存储库。

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.
接下来,您需要注册 Travis CI添加您的项目 。您需要推送新的提交来触发构建。

Be sure to check out the Travis CI docs if you want to know more.
如果您想了解更多信息,请务必查看Travis CI文档

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容