travisCI 持續集成 gh-page 並部署

介紹

咱們大多數公司在作項目時，應該都碰到過，當代碼被 push 上 git 或者是 svn 時，過幾分鐘就能夠在線上實時看到咱們的項目，就像看到親生兒子同樣，可是確定不少人不知道這是怎麼實現的（若是你知道，那能夠不用往下看了，點個贊就去吃飯吧...），因此今天我就來給你們介紹一下其中的一款 travis-CI，請記住它的 face：

持續集成（Continuous integration）的核心思想，代碼先自動化測試用例，經過後集成到主幹。它細分的話有兩個概念：

• 持續交付
• 持續部署

簡單來講持續部署是持續交付的下一步，持續交付是測試階段，部署就是測試經過階段。,這個就有不少東西展開了，求我我就告訴你...

準備

• GitHub 帳號（做爲一個合格的程序員，你沒有真的好嗎？）
• travis-CI 平臺接入
• GITHUB_TOKEN
• 給我點贊...

第一步

登陸 CI 官網，而後鏈接本身的 gitHub，這個時候 Legacy Services Integration 應該默認顯示了幾個本身gitHub的項目

若是顯示不全，能夠按左邊的 sync 同步一下

而後第一張圖每一個項目的邊上有一個 switch 開關，你想要讓哪一個集成就打開哪一個吧（不截圖了，我懶...）

第二步

進入本身的 gh 主頁，依次：GitHub settings -> developer settings -> Personal access tokens，勾選權限，自由發揮，你要全勾也行...

將生成的 token 複製備用

第三步

回到CI，打開你打開開關的那個項目的 settings（看到你很繞我就放心了...），進入配置頁面，在 Environment Variables 裏填入如下內容：

分別對應：git項目、項目分支（我這裏的分支是gh-pages）、token、Git-email、Git-username

第四步

在項目根目錄配置個文件叫 .travis.yml,打包項目以vue-cli爲例，內容以下：

language: node_js
# nodejs版本
node_js:
    - '8.9.1'

# S: Build Lifecycle
install:
  - npm install
script:
  - npm run build

# 這個是否是看着很熟悉？
after_script:
  - cd ./dist
  - git init
  - git config user.name "${USER_NAME}"
  - git config user.email "${USER_EMAIL}"
  - git add .
  - git commit -m "blog.jzxer.cn"
  - git push --force --quiet "https://${test_token}@${GH_REF}" master:${P_BRANCH}
# E: Build LifeCycle

# 只對某個分支行爲生效
branches:
  only:
    - master

第四點

打開 CI，進入本身構建項目的那個頁面，打開 job log，感覺那生怕 error 的快感！（都是淚...）

固然若是你經過的話，就會有一個 passing 在你的項目標題旁邊。

每次看到這個我都激動的熱淚盈眶...

第五步

看一下本身在git上的項目，是否是出現了這個分支，而且已經自動部署好了？成功的截圖。

部署好的頁面

後記

如今，你能夠瘋狂的 push 代碼了，其餘的事交給 CI 去作就行。

好了，碼了這麼久的字，你是否是應該：

點個贊？

個贊？

贊？

👍