从最开始的手动构建部署：手动敲构建命令，然后手动推到 GitHub。(重复的次数多了就显得很麻烦，出错的几率也会变大。)
到后来写了一个构建部署的脚本：每次开发完，再手动执行脚本，完成构建部署。
再到现在的使用 Travis CI 自动更新：开发完，我只用将源码 push 到 GitHub 做版本管理，就 ok 了；Travis 监测到代码有变化，然后就会自动执行我们设定好的任务。【优秀～】
[](
)什么是持续集成
=====================================================================
[Travis CI](
) 提供的持续集成服务（Continuous Integration，简称 CI）。它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。
持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。
举一个例子：我们可以在我们的开源项目中，安排一个代码格式检查和测试的任务
npm run test，不管是自己提交代码，还是别人提交的 PR，Travis 监测到代码有新的内容，都会来执行这个任务。【不管代码写的怎样，格式一定不能乱～，哈哈?】
持续集成的好处在于，每次代码的小幅变更，就能看到运行结果，从而不断累积小的变更，而不是在开发周期结束时，一下子合并一大块代码。
[](
)开始使用
==================================================================
首先打开官方网站 [travis-ci.org](
)，然后使用 Github 账号登入 Travis CI，然后 Travis 中会列出你 Github 上面所有的仓库，以及你所属于的组织。
然后，勾选你需要 Travis 帮你自动构建的仓库，打开仓库旁边的开关，打开以后，Travis 就会监听这个仓库的所有变化了。
[](
)必要的 .travis.yml 文件
================================================================================
Travis 要求项目的根目录下面，必须有一个 .travis.yml 文件。这是配置文件，指定了 Travis 的行为。该文件必须保存在 Github 仓库里面，一旦代码仓库有新的 Commit，Travis 就会去找这个文件，执行里面的命令。
所以呢，我们就可以在这个文件里，配置我们任务（Travis 监测到仓库有 commit 后会自动执行）。
一个简单的 .travis.yml 文件如下：
language: node_js
script: true
所以呢，我在 .travis.yml 里，配置了一个执行脚本的任务；那么现在 Travis 监测到我仓库有 commit 后就会找到 .travis.yml 这个文件，然后就执行了我的那个脚本了。
[](
)install 字段
install 字段用来指定安装脚本，如果有多个脚本，可以写成下面的形式。
install:
- command1
- command2
上面代码中，如果 command1 失败了，整个构建就会停下来，不再往下进行
如果不需要安装，即跳过安装阶段，就直接设为 true。
install: true
[](
)script 字段
script 字段用来配置构建或者测试脚本，如果有多个脚本，可以写成下面的形式。
script:
- command1
- command2
注意，script 与 install 不一样，如果 command1 失败，command2 会继续执行。但是，整个构建阶段的状态是失败。
如果 command2 只有在 command1 成功后才能执行，就要写成下面这样。
script: command1 && command2
[](
)部署时面临的问题【重点】
==========================================================================
现在脚本是由 Travis CI 来执行的，部署的时候，怎么让 Travis 有权限往 Github 提交代码呢？
Github 有提供一个 [Personal access tokens](
)，这个 Token 与 账号密码 以及 SSH Keys 同样具有 Github 写入能力。
前往 Github 帐号 Settings 页面，在左侧选择 Personal Access Token，然后在右侧面板点击 “Generate new token” 来新建一个 Token。需要注意的是，创建完的 Token 只有第一次可见，之后再访问就无法看见（只能看见他的名称），因此要保存好这个值。
那么，这个 Token 怎么使用呢。
[](
)方案一、
一个比较方便快捷的方式，是通过 Travis 网站，写在每个仓库的设置页面里，有一个 Environment Variables 的配置项，给我们的 Token 起一个名字 gh_token 添加进去。这样以来，脚本内部就可以使用这个环境变量了。
你可以在你脚本内部使用 ${gh_token} 的形式来使用这个 Token 了。【当然了，你还可以添加其他的环境变量进去。】【[官方文档在这里](
)】
使用 Personal access tokens 向 GitHub 提交代码的命令格式如下：
# ${GH_TOKEN} 对应就是 Personal access tokens ， GH_TOKEN 是环境变量名
# ${GH_REF} 对应的是你的 Github 仓库地址，GH_REF 是变量名
git push -f "https://${GH_TOKEN}@${GH_REF}" master:gh-pages
这里需要注意的是：
1、GitHub 生成的这个 Token ，只有生成的时候可以看到明文，后面就看不到明文了，所以你使用的时候最好一次操作成功。
2、Travis CI 中添加 Token 时，记得用密文，要不然在 build log 中是可以被看到的。
[](
)方案二、
你还可以使用 Travis CI 提供的加密工具来加密我们的这个 Token。加密原理机制如下：
首先，安装 Ruby 的包 travis 。
# 安装 Travis CI 命令行工具
$ gem install travis
然后，就可以用 travis encrypt 命令加密信息。
在项目的根目录下，执行下面的命令。
$ travis encrypt name=secretvalue
上面命令中，gh_token 是要加密的变量名，secretvalue 是要加密的变量值。执行以后，屏幕上会输出如下信息。
secure: "... encrypted data ..."
现在，就可以把这一行加入 .travis.yml 。
env:
global:
### 总结
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**
这里分享一些前端学习笔记：
* **html5 / css3 学习笔记**
* **JavaScript 学习笔记**
* **Vue 学习笔记**
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/172737.html