使用travis-ci自動部署github上的項目

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的配置，還須要添加一些環境變量使起更方便(地址別填錯了)

圖中配置依次爲：

1. GH_REF：倉庫地址
2. GH_TOKEN：生成的令牌
3. P_BRANCH：推送的pages分支 //這裏填的時候必定要注意,通常來說就是 gh-pages 。別手抖寫個master。血淋淋的教訓~
4. U_EMAIL：郵箱
5. 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 從新構建