背景: UI 组件库做好了, 但是要将 UI 文档自动发布, 之前都是每次提交代码的时候去手动构建后再发布文档, 但是这样太麻烦, 所以想用 travis-ci 自动化构建一个 vue UI 框架的官方文档. 组件库源码地址
https://github.com/ninecat-ui/ninecat-ui
实现的方法
在项目里面建一个 docs 文件夹, 然后 commit 后再构建文档, 然后 push 到原代码仓库, 通过 gh-page 关联 docs 文件实现官方文档的预览.
官方文档为另外的项目, 以 ninecat-ui.GitHub.io 这种主页名命名项目, 然后 commit 后构建文档, 再 clone 项目 =》commit 项目 =》提交项目.
两种方法原理都可行, 但是第一种方式会发现在 travis-ci 第二次提交的时候, Git 的记录是没有的, 所以放弃了第一种, 然后用第二种方法实现的, 第二种方法有个好处就是不用担心你的操作会影响到原项目, 因为没有 push 操作, 所以下面就讲解一下第二种方法实现的步骤.
实现步骤
1.GitHub 账号关联 TravisCI
用 GitHub 账号登录 https://travis-ci.com/, 你的所有 Repo 都会列出来, 选择激活你想要 build 的 Repo, 这一步基本都是傻瓜操作, 很简单, 无需赘述.
2. 配置环境变量
环境变量有两种, 一种是配置在. travis.YAML 文件里面的,
.travis.YAML 文件
另一种是配置在 travis-ci 的后台系统中进行, 在 setting 里的 Environment Variables 里面.
travis-ci 后台配置
第二种方式的环境变量主要是用于第三方系统的权限校验, 当然再本次实践中也需要进行配置, 配置一个 GitHub 的 token 以便后面的提交操作.
按照下面的步骤配置 GitHub 的 token
(1) 进入 GitHub 的个人设置, Settings=> Developer settings=>Personal access tokens=>Generate new token
进行如下勾选就行
Generate new token
(2) 进入 travis-ci 的后台系统中配置环境变量 Environment Variables 如
travis-ci 后台配置
图所示, 新增一个环境变量, 然后将 GitHub 建立的 token 填入其中. DISPLAY VALUE IN BUILD LOG 选项不要勾选, 否则环境变量会在你执行 build 脚本的时候显示出来.
3. 配置脚本构建
- # Designated language. https://docs.travis-ci.com/user/languages/javascript-with-nodejs/
- language: node_js
- # Environment variables
- env:
- global:
- - GitHub_REF: GitHub.com/ninecat-ui/ninecat-ui.GitHub.io.Git
- # Install dependence
- install:
- - NPM install
- - NPM install -g codecov
- # Cache the node_modules folder and don't need to download and install all NPM packages every time.
- cache:
- directories:
- - node_modules
- # Specify the node version.
- node_js:
- - "11.1.0"
- # Perform builds only on the specified branch. https://docs.travis-ci.com/user/customizing-the-build/#building-specific-branches
- branches:
- only:
- - master
- # The script to execute.
- script:
- - NPM test
- - codecov
- - NPM run docs:build
- - cd docs
- - Git init
- - Git add -A
- - Git commit -m "docs:update docs"
- - Git push --force --quiet "https://${GitHub_TOKEN}@${GitHub_REF}" master:master
- # Configure to send notifications when the build fails. https://docs.travis-ci.com/user/notifications
- notifications:
- webhooks:
- urls:
- - https://www.travisbuddy.com/
- on_success: never # Successful build does not send mail.
- on_failure: always # Build failure always sends a message.
上面的脚本可以根据官方文档 https://docs.travis-ci.com/user/speeding-up-the-build / 自行定义和使用
来源: http://www.jianshu.com/p/f47fee63d242