背景:UI組件庫做好了,但是要將UI文檔自動發(fā)布沧奴,之前都是每次提交代碼的時候去手動構(gòu)建后再發(fā)布文檔皂冰,但是這樣太麻煩,所以想用travis-ci自動化構(gòu)建一個VUE UI框架的官方文檔渐逃。組件庫源碼地址
https://github.com/ninecat-ui/ninecat-ui
實現(xiàn)的方法
在項目里面建一個docs文件夾,然后commit后再構(gòu)建文檔围详,然后push到原代碼倉庫朴乖,通過gh-page關(guān)聯(lián)docs文件實現(xiàn)官方文檔的預(yù)覽。
官方文檔為另外的項目助赞,以 ninecat-ui.github.io這種主頁名命名項目买羞,然后commit后構(gòu)建文檔,再clone項目=》commit項目=》提交項目雹食。
兩種方法原理都可行畜普,但是第一種方式會發(fā)現(xiàn)在travis-ci第二次提交的時候,git的記錄是沒有的群叶,所以放棄了第一種吃挑,然后用第二種方法實現(xiàn)的,第二種方法有個好處就是不用擔心你的操作會影響到原項目街立,因為沒有push操作舶衬,所以下面就講解一下第二種方法實現(xiàn)的步驟。
實現(xiàn)步驟
1.Github 賬號關(guān)聯(lián) TravisCI
用 Github 賬號登錄https://travis-ci.com/赎离,你的所有 Repo 都會列出來逛犹,選擇激活你想要 build 的 Repo,這一步基本都是傻瓜操作梁剔,很簡單虽画,無需贅述。
2.配置環(huán)境變量
環(huán)境變量有兩種荣病,一種是配置在.travis.yml
文件里面的码撰,
另一種是配置在travis-ci的后臺系統(tǒng)中進行,在setting里的Environment Variables里面个盆。
第二種方式的環(huán)境變量主要是用于第三方系統(tǒng)的權(quán)限校驗脖岛,當然再本次實踐中也需要進行配置,配置一個github的token以便后面的提交操作砾省。
按照下面的步驟配置GitHub的token
(1)進入GitHub的個人設(shè)置,Settings=> Developer settings=>Personal access tokens=>Generate new token
進行如下勾選就行
(2)進入travis-ci的后臺系統(tǒng)中配置環(huán)境變量Environment Variables如
travis-ci后臺配置
圖所示鸡岗,新增一個環(huán)境變量,然后將GitHub建立的token填入其中编兄。DISPLAY VALUE IN BUILD LOG 選項不要勾選轩性,否則環(huán)境變量會在你執(zhí)行build腳本的時候顯示出來。
3.配置腳本構(gòu)建
# 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.
上面的腳本可以根據(jù)官方文檔https://docs.travis-ci.com/user/speeding-up-the-build/自行定義和使用