使用 TravisCI 持续集成角度项目

原文：https://medium.com/hackernoon/continuous-integration-for-angular-projects-with-travisci-4d2cc72d7853

在过去的几十年里，web 开发的旅程令人惊叹。标准已经改变，实践已经发展，web 开发世界的情况变得越来越好。例如，人们从猴子修补代码转移到 MVC 和设计模式。公司和个人都倾向于 TDD (测试驱动开发)，而不是 BDD (业务驱动开发)。最后但同样重要的是，CI(持续集成)和 CD(持续交付)在技术行业越来越受欢迎。

在本文中，我将解释如何使用 TravisCI 在 GitHub 上为您的 Angular 项目设置持续集成。这适用于 angular 应用程序以及您创建的任何 Angular 库/插件。

但是为什么呢？

在进入如何之前，我们先来看看为什么。为什么我们实际上需要在我们的项目中实施 CI？这样做有几个好处:

对于所有手动运行测试的开发人员来说，它节省了时间，并确保一切顺利进行。
开发人员发现很难记住哪些分支需要测试，哪些分支应该忽略。没必要再记起那件事了。
不再'它在我的机器上工作。“咄！”。正确设置 CI 后，您可以在您选择的环境中运行测试。
详细说明第三点，它使得在你的 CI 集成中复制生产环境变得更加容易，所以你将知道它在生产中是如何工作的。
实施 CI 就是爽。

那么我们该怎么做呢？

我将使用这个示例应用程序来演示 TravisCI 的集成。我已经在应用程序中添加了一些单元测试和端到端测试。这是应用程序的代码库。完成 CI 实施后，我们将能够:。

运行单元测试
运行 E2E 测试
生成生产版本
在 gh-pages 上部署生产版本进行演示。

所以让我们开始吧。首先，我将通过执行以下命令在我的项目中创建一个名为travis-ci的分支:

git checkout -b travis-ci master

现在，我们将前往https://travis-ci.org。由于我已经设置了一个 Github 帐户，我可以快速登录。您可以注册或使用您的 GitHub 帐户登录。然后，我们将从那里启用我的帐户下的存储库。请参见下面的快照:

Turning on TravisCI for our app

因此，我们为 GitHub repo 打开了 TravisCI，但它现在实际上什么也不做。我们需要在项目的根目录下添加一个.travis.yml文件。那份文件会告诉特拉维斯该怎么做。(例如，在哪个环境下工作、操作系统、语言、版本、CI 要考虑的分支等。) 这是我们将要使用的 YAML 文件(记得我们在 git repo 中切换到了分支travis-ci)。让我们快速浏览一下这个文件的内容。

语言:告诉 travis 哪个环境将用于管道。我们在测试中使用了 node_js 容器。
node_js:指定使用哪个版本的 node_js。我们可以指定stable获得最新的稳定版本等等。
分支步骤配置哪些分支应该执行管道。对于我们的配置，我们只对主分支的构建感兴趣。点击查看更多关于分支的选项。
before_script阶段在运行脚本之前执行，我们实际上正在为我们的测试环境安装一堆东西，比如用于运行单元的 Google Chrome stable 和基于它的 E2E 测试。
脚本阶段包含实际的步骤，我们运行我们的单元测试，e2e 测试，然后我们生成一个产品构建，它将构建保存在 dist 文件夹中。

之后，我们使用 GitHub 的 pages 服务，通过将 dist 文件夹推到 gh-pages 分支来部署我们的代码。我们仅为部署的主分支进行了配置。注意 skip_cleanup 标志设置为 true？它确保在脚本阶段生成并保存到 dist 的构建不会被清除。最后，为了部署，我们将github_token设置为$GITHUB_TOKEN，这应该是一个我们必须提供给 TravisCI 的 ENV 变量。但在此之前，我们需要从 GitHub 概要文件中生成令牌。我将进入我的 GitHub 设置>个人访问令牌>生成新令牌，如下图所示。 注意:确保允许作用域中的回购访问，并复制和保存您生成的令牌以备后用: