使用Travis CI嘗試前端的持續集成

前端的持續集成

在軟件工程中，持續集成（CI）指的是屢次小幅度的將開發的代碼合併到主幹（個人理解這個主幹是相似於dev的測試環境代碼）的作法。在合併以前，須要作一些測試和構建的步驟，經過了以後就能夠將新代碼"集成"到主幹。

結合我自身的真實狀況，就是我有一個演示項目（使用的GitHub pages）開源在GitHub，每次須要作點升級都須要從新build，而後把buil生成的的靜態文件提交到GitHub。這就致使了不少的重複性工做。

例若有時候我只是修改一行文本，可是也須要本身手動build和提交。如今我想只是修改源碼並提交，build和提交build後的靜態文件交給Bot去完成。

Travis CI

Github上面的開源項目使用Travis CI提供的持續集成服務（Continuous Integration，簡稱 CI）是很是方便的。

首先你得有個GitHub帳號和項目，而後去travis-ci官方網站使用GitHub受權登陸。在setting裏激活某個倉庫，一旦激活了一個倉庫，Travis 會監聽這個倉庫的全部變化。

登陸GitHub，在最右側下拉中點擊setting，而後按順序點擊Developer settings和Personal access tokens。繼續找到Generate new token生成新的token，以下圖所示，我把能點的都點上了，只有一個delete_repo沒有受權。這個token要保存下，離開頁面之後就看不到了，只能從新生成。

在travis-c打開激活的倉庫setting，添加1個環境變量，分別是GITHUB_TOKEN。GITHUB_TOKEN是咱們剛剛在GitHub上面的受權token，基本全部權限都給了。

編寫.travis.yml

準備工做完畢後，在項目的根目錄新建.travis.yml文件，這是配置和腳本文件，指定了 Travis 的行爲。該文件必須保存在項目的根目錄 ，一旦代碼倉庫有新的 Commit，Travis 就會去找這個文件，按照配置執行裏面的命令。

這裏說下我想實現的基本步驟：

1. 我修改源碼或者升級某個node包，提交到GitHub
2. Travis 獲得消息後，clone最新的代碼
3. 使用yarn執行安裝和build
4. 將全部文件的變化提交到GitHub

下面介紹下.travis.yml文件：

# 語言
language: node_js
# 版本,這裏指定的是最新的lts版
node_js: lts/*
# 要最新的就行，因此克隆最近的一次commit
git:
  depth: 1
# 安裝
install: yarn
# 指定了緩存的內容，這裏是yarn安裝的東西，既node_modules
cache: yarn
# build
script: yarn build
# build成功後開始部署，下面是travis-ci提供的一些比較便捷的寫法，針對GitHub pages的
deploy:
  # 這裏指定了GitHub的pages服務
  provider: pages
  # Make sure you have skip_cleanup set to true, otherwise Travis CI will delete all the files created during the build,
  # which will probably delete what you are trying to upload.
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  # 這裏須要是true，不然會git push --force，把之前的記錄覆蓋了
  keep_history: true
  # 使用GitHub的用戶名和郵箱
  committer_from_gh: true
  # 目標分支
  target_branch: master
  on:
    branch: master
複製代碼

GitHub的pages服務只能指定在master分支的根目錄或者docs，我這裏使用的是放在docs，根目錄還須要存放源碼。

這樣只要我提交了一些更新，Bot就會build一次，沒有變更的話就不提交，有變化的話就會自動push到GitHub。這一步暫時還不能自定義commit message。下圖中docs文件夾的提交就是Bot作的。

能夠查看項目的真實記錄

下面貼出bot自動執行的部分log

3.22s$ nvm install lts/*
cache.1
Setting up build cache
cache.yarn
cache.npm
$ node --version
v12.13.0
$ npm --version
6.12.0
$ nvm --version
0.35.1
$ yarn --version
1.15.2
install
1.09s$ yarn
8.68s$ yarn build
yarn run v1.15.2
$ vue-cli-service build
      
Done in 8.52s.
The command "yarn build" exited with 0.
cache.2
store build cache
dpl_0
2.03s$ rvm $(travis_internal_ruby) --fuzzy do ruby -S gem install dpl
7.84s
dpl.1
Installing deploy dependencies
Logged in as @hezhongfeng (hezf)
dpl.2
Preparing deploy
dpl.3
Deploying application
Done. Your build exited with 0.
複製代碼

自定義行爲

若是想經過commit message去控制Bot的行爲，能夠在腳本里進行判斷。 script: if [[ $TRAVIS_COMMIT_MESSAGE == *"trigger build"* ]]; then mvn install ; fi ;

整體速度仍是很快的，整個build+提交的時間在1分鐘多一點。之後都不用我手動build和提交了。

gitlab上面也有類似的GitLab CI/CD，應該是差很少的，暫時先不作過多研究。