travis-ci是什么？

一個(gè)使用yaml格式配置用于持續(xù)集成完成自動(dòng)化測(cè)試部署的開源項(xiàng)目
官網(wǎng)：https://travis-ci.org/

使用travis-ci集成vue.js項(xiàng)目

首先，您需要一個(gè)github賬號(hào) and 一個(gè)vue.js項(xiàng)目~ 沒有的話試試這個(gè)啊metools

1. 登錄Github并擁有一個(gè)項(xiàng)目

登錄github 然后Star,Fork metools
當(dāng)然可以先去看看這個(gè)項(xiàng)目是啥..http://tools.yimo.link/

2. 前往travis-ci官網(wǎng)

使用Github賬號(hào)登錄

3. 登錄成功回到用戶中心

默認(rèn)會(huì)同步一部分倉(cāng)庫(kù)，如果太多的話需要點(diǎn)擊Sync account進(jìn)行同步

4. 開啟對(duì) metools 項(xiàng)目的集成并進(jìn)入設(shè)置頁(yè)面


如下圖所示，根據(jù)需要配置構(gòu)建信息
添加github的Token到環(huán)境變量中，用戶名，郵箱也可添加進(jìn)去，這樣配置文件中就可以使用了
生成Token見步驟5.因?yàn)間ithub上面只能看到一次，所以在travis-ci中就可以顯示出來以備后用

根據(jù)步驟6的配置，還需要添加一些環(huán)境變量使起更方便(地址別填錯(cuò)了)

圖中配置依次為：

  1. GH_REF：倉(cāng)庫(kù)地址

  2. GH_TOKEN：生成的令牌

  3. P_BRANCH：推送的pages分支 //這里填的時(shí)候一定要注意,一般來講就是 gh-pages 。別手抖寫個(gè)master。血淋淋的教訓(xùn)~

  4. U_EMAIL：郵箱

  5. U_NAME：名稱

5. Github生成訪問令牌 (即添加授權(quán))

訪問令牌的作用就是授權(quán)倉(cāng)庫(kù)操作權(quán)限 https://github.com/settings/tokens
Github>settings>Personal access tokens> Generate new token > Generate token> Copy Token

6. .travis.yml 文件的簡(jiǎn)單配置

.travis.yml文件的作用就是在代碼提交的時(shí)候travis-ci會(huì)根據(jù)該配置文件執(zhí)行配置的任務(wù)
在項(xiàng)目根目錄中創(chuàng)建(或修改).travis.yml 文件，其中${環(huán)境變量}為環(huán)境變量在travis中配置即可

language: node_js# nodejs版本node_js:     - '6'# Travis-CI Cachingcache:  directories:    - node_modules# S: Build Lifecycleinstall:  - npm installbefore_script:# 無(wú)其他依賴項(xiàng)所以執(zhí)行npm run build 構(gòu)建就行了script:  - npm run buildafter_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#指定分支，只有指定的分支提交時(shí)才會(huì)運(yùn)行腳本branches:  only:    - masterenv: global:
   # 我將其添加到了travis-ci的環(huán)境變量中
   #- GH_REF: github.com/yimogit/metools.git

7. 自動(dòng)構(gòu)建項(xiàng)目

修改完成，并推送到github后，就可以在travis-ci.org中看到項(xiàng)目開始構(gòu)建了(以后每次推送代碼到倉(cāng)庫(kù)后都將會(huì)自動(dòng)構(gòu)建項(xiàng)目)

構(gòu)建完成日志

構(gòu)建完成。在設(shè)置中可以看到默認(rèn)已經(jīng)將gh-pages分支部署到pages，訪問https://用戶名.github.io/metools/即可預(yù)覽效果。

若構(gòu)建失敗，可以通過travis-ci中項(xiàng)目面板右上角的 Restart build 重新構(gòu)建

作者：易墨 
個(gè)人小站：http://www.yimo.link 
說明：歡迎拍磚,不足之處還望園友們指出; 

http://www.cnblogs.com/morang/p/7228488.html