travis-ci是什么?
一個使用yaml格式配置用於持續集成完成自動化測試部署的開源項目
官網:https://travis-ci.org/
使用travis-ci集成vue.js項目
首先,您需要一個github賬號 and 一個vue.js項目~ 沒有的話試試這個啊metools
1. 登錄Github並擁有一個項目
登錄github 然后Star,Fork metools
當然可以先去看看這個項目是啥..http://tools.yimo.link/
2. 前往travis-ci官網
使用Github賬號登錄
3. 登錄成功回到用戶中心
默認會同步一部分倉庫,如果太多的話需要點擊Sync account進行同步
4. 開啟對 metools 項目的集成並進入設置頁面
如下圖所示,根據需要配置構建信息
添加github的Token到環境變量中,用戶名,郵箱也可添加進去,這樣配置文件中就可以使用了
生成Token見步驟5.注意:配置私密的環境變量時一定要加密,因為會顯示在日志中且能夠被他人看到
根據步驟6的配置,還需要添加一些環境變量使起更方便(地址別填錯了)
圖中配置依次為:
GH_REF:倉庫地址GH_TOKEN:生成的令牌P_BRANCH:推送的pages分支 //這里填的時候一定要注意,一般來講就是 gh-pages 。別手抖寫個master。血淋淋的教訓~U_EMAIL:郵箱U_NAME:名稱
5. Github生成訪問令牌 (即添加授權)
訪問令牌的作用就是授權倉庫操作權限 https://github.com/settings/tokens
Github>settings>Personal access tokens> Generate new token > Generate token> Copy Token
6. .travis.yml 文件的簡單配置
.travis.yml文件的作用就是在代碼提交的時候travis-ci會根據該配置文件執行配置的任務
在項目根目錄中創建(或修改).travis.yml文件,其中${環境變量}為環境變量在travis中配置即可
language: node_js
# nodejs版本
node_js:
- '6'
# Travis-CI Caching
cache:
directories:
- node_modules
# S: Build Lifecycle
install:
- npm install
before_script:
# 無其他依賴項所以執行npm run build 構建就行了
script:
- npm run build
after_script:
- cd ./dist
- git init
- git config user.name "${U_NAME}"
- git config user.email "${U_EMAIL}"
- git add .
- git commit -m "Update tools"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}
# E: Build LifeCycle
#指定分支,只有指定的分支提交時才會運行腳本
branches:
only:
- master
env:
global:
# 我將其添加到了travis-ci的環境變量中
#- GH_REF: github.com/yimogit/metools.git
7. 自動構建項目
修改完成,並推送到github后,就可以在travis-ci.org中看到項目開始構建了(以后每次推送代碼到倉庫后都將會自動構建項目)

構建完成日志

構建完成。在設置中可以看到默認已經將gh-pages分支部署到pages,訪問https://用戶名.github.io/metools/即可預覽效果。

若構建失敗,可以通過travis-ci中項目面板右上角的 Restart build 重新構建







