教程-如何用travis-ci實現(xiàn)自動化部署前端項目

背景: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.yml文件

另一種是配置在travis-ci的后臺系統(tǒng)中進行,在setting里的Environment Variables里面个盆。


travis-ci后臺配置

第二種方式的環(huán)境變量主要是用于第三方系統(tǒng)的權(quán)限校驗脖岛,當然再本次實踐中也需要進行配置,配置一個github的token以便后面的提交操作砾省。

按照下面的步驟配置GitHub的token
(1)進入GitHub的個人設(shè)置,Settings=> Developer settings=>Personal access tokens=>Generate new token
進行如下勾選就行

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/自行定義和使用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末狠鸳,一起剝皮案震驚了整個濱河市揣苏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌件舵,老刑警劉巖卸察,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铅祸,居然都是意外死亡坑质,警方通過查閱死者的電腦和手機合武,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涡扼,“玉大人稼跳,你說我怎么就攤上這事〕曰Γ” “怎么了汤善?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長票彪。 經(jīng)常有香客問我红淡,道長,這世上最難降的妖魔是什么降铸? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任在旱,我火速辦了婚禮,結(jié)果婚禮上推掸,老公的妹妹穿的比我還像新娘颈渊。我一直安慰自己,他們只是感情好终佛,可當我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布俊嗽。 她就那樣靜靜地躺著,像睡著了一般铃彰。 火紅的嫁衣襯著肌膚如雪绍豁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天牙捉,我揣著相機與錄音竹揍,去河邊找鬼。 笑死邪铲,一個胖子當著我的面吹牛芬位,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播带到,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼昧碉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了揽惹?” 一聲冷哼從身側(cè)響起被饿,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎搪搏,沒想到半個月后狭握,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡疯溺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年论颅,在試婚紗的時候發(fā)現(xiàn)自己被綠了哎垦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡恃疯,死狀恐怖撼泛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情澡谭,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布损俭,位于F島的核電站蛙奖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏杆兵。R本人自食惡果不足惜雁仲,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望琐脏。 院中可真熱鬧攒砖,春花似錦、人聲如沸日裙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽昂拂。三九已至受神,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間格侯,已是汗流浹背鼻听。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留联四,地道東北人撑碴。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像朝墩,于是被迫代替她去往敵國和親醉拓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,044評論 2 355