本文做者：韓永剛，360奇舞團 WEB前端開發高級工程師。javascript

本文將簡單介紹一下持續集成的概念，並手把手帶你在你的微信小程序項目中完成屬於你的持續集成方案。css

什麼是前端工程化

全部能下降成本，而且能提升效率的事情總稱爲工程化。在前端項目中可以減小重複工做、擴展 javascript\html\css 自己的語言能力、解決功能複用和變動問題、解決開發和產品環境差別問題、任什麼時候間任何地點生成可部署的軟件、解決發佈流程問題，都屬於前端工程化。html

什麼是持續集成

持續集成是前端工程化中的一部分，是一種軟件開發實踐，即團隊開發成員常常集成他們的工做，一般每一個成員天天至少集成一次，也就意味着天天可能會發生屢次集成。每次集成都經過自動化的構建（包括自動化編譯，自動化測試，自動化發佈）來驗證項目代碼，從而儘早地發現錯誤。前端

Web項目持續集成怎麼作

Web項目的持續集成方案選擇比較多，而且相對成熟，這裏介紹一下 gitlab-ci 持續集成方案。java

這種方式的原理就是爲項目在本身的 linux 服務器安裝並註冊 gitlab-runner ，註冊會有一個 token ，服務器上運行 gitlab-runner 後， runner 會輪詢的發送帶 token 的 http 請求給 gitlab ,若是 gitlab 有任務了，（通常是 git push ），那麼會把任務信息返回給 runner ，而後 runner 就開始調用註冊時選的 Executor 來執行項目根目錄下的配置文件 .gitlab-ci.yml ，執行後把結果反饋給 gitlab 。node

此時咱們能夠編寫 .gitlab-ci.yml 腳本，好比設定當 test 分支發生 push 時，自動運行測試用例、自動構建代碼、自動將代碼更新到測試人員在測的環境等任何你想在提測時須要作的事情。當 merge 到 master 時，自動更新線上代碼完成上線等各類你想在上線時作的事情。linux

這裏只要考慮的足夠全面，那麼以後的項目開發你只須要 push 到對應的分支，gitlab-runner 會自動完成你想作的全部構建、提測、上線操做。減小重複工做，這就是持續集成的意義所在。git

手把手教你完成小程序的持續集成方案

小程序的持續集成能夠繼續使用 gitlab-ci 的方式，但因爲小程序的構建、提測、提交體驗版等操做都須要依賴於 微信開發者工具 ，而微信開發者工具只有 Windows 和 Mac 版，因此咱們須要一臺 Windows 服務器來運行 gitlab-runner。shell

1. 準備工做

一臺 Windows 服務器
一個權限爲 Maintainer 的 gitlab項目

2. 安裝必要軟件

在這臺 Windows 服務器上安裝如下軟件npm

Git
Node.js
微信開發者工具

3. 配置gitlab-runner

首先下載 gitlab-runner

https://docs.gitlab.com/runner/install/windows.html

下載完成後將其移動到合適的路徑後重命名爲 gitlab-runner.exe
在 Windows 服務器中打開 powershell 並進入 gitlab-runner.exe 所在目錄，而後執行如下命令

.\gitlab-runner.exe register
複製代碼

Please enter the gitlab-ci coordinator URL

打開想要設置 CI 的 gitlab 項目，進入頁面 settings > CI/CD > Runners > Expand，找到 Set up a specific Runner manually ，輸入 Specify the following URL during the Runner setup: 下的地址

Please enter the gitlab-ci token for this runner

輸入 Use the following registration token during setup: 下的token字符串

Please enter the gitlab-ci description for this runner

輸入一個描述

Please enter the gitlab-ci tags for this runner

輸入一個標籤，該標籤對應該runner

Please enter the executor

這裏輸入 shell 就好

此時刷新 gitlab 頁面會新增一個 gitlab-runner

執行命令 install

.\gitlab-runner.exe install
複製代碼

執行命令 start

.\gitlab-runner.exe start
複製代碼

此時刷新 gitlab 頁面，以前的 gitlab-runner 會更新爲如下狀態，表示 gitlab-runner 配置完成，已經能夠開始工做。

4. 修改gitlab-runner服務的登陸帳號

因爲 gitlab-runner 服務默認登陸帳號爲 authority\system ，而這個帳號在執行微信開發者工具命令行時會出現報錯，因此咱們須要更改 gitlab-runner 服務的登陸帳號爲正確帳號並重啓該服務。

右擊計算機 -> 管理 -> 服務和應用程序 -> 服務

找到 gitlab-runner 服務

右擊 gitlab-runner -> 屬性 -> 登陸 -> 此帳號 -> 輸入能夠正確使用微信開發者工具命令行的帳號和密碼 -> 肯定 -> 重啓動此服務

修改完成後帳號會正確被更改

5. 配置微信開發者工具

使用你的微信帳號登陸開發者工具
設置 -> 安全 -> 服務端口 -> 開啓

6. 配置.gitlab-ci.yml

在項目根目錄建立 .gitlab-ci.yml 文件，並填寫如下配置。

stages: # 定義階段用於執行任務
  - build
  - deploy

build_job: # 定義 build 任務，名稱能夠隨意命名，只是爲了方便理解和區分
  stage: build # 該任務屬於 build 階段，要嚴格與stages中定義的命名一致
  only:
    - master
  tags: # tags 指定運行在哪一個 Runner 上，這裏須要在咱們剛註冊的 Runner 運行，和註冊時的 mp_win7 匹配
    - mp_win7
  before_script: # 執行script以前的鉤子
    - whoami 
  script: # 執行下面腳本，這裏能夠自定義配置您的構建任務
    - echo "build" # 能夠在這裏執行您項目的構建編譯操做

deploy_job: # 定義 deploy 任務，名稱能夠隨意命名，只是爲了方便理解和區分
  stage: deploy # 該任務屬於 deploy 階段
  only:
    - master
  tags: # tags 指定運行在哪一個 Runner 上，這裏須要在咱們剛註冊的 Runner 運行，和註冊時的 mp_win7 匹配
    - mp_win7
  script: # 執行下面腳本，這裏能夠自定義配置您的部署任務
    - C:\software\wechatDevTool\cli.bat -u 0.1.0@"$PWD" --upload-desc 最新的描述 # 這裏使用微信開發者工具提供的命令行工具進行上傳體驗版操做
複製代碼

修改完成後將代碼 push 到遠程倉庫，會自動觸發CI任務。

此時登陸微信小程序官網後臺，就能夠看到剛剛 push 代碼時由 gitlab-ci 自動上傳的體驗版了。

有關 .gitlab-ci.yml 的詳細配置方法能夠參考如下文章。

http://urlqh.cn/mK3tA

http://urlqh.cn/mNjWs

7. 持續集成項目方案

如下爲本人最近在作的 360瞭望臺 小程序的持續集成方案，您能夠根據本身的須要加以改進，並完成屬於你的持續集成方案。

因爲編寫 .gitlab-ci.yml 時須要用到微信開發者工具的命令行，因此爲了便於團隊成員使用，我開發了一個 node.js 腳本，併發布爲 npm 模塊，用於在 .gitlab-ci.yml 調用 Windows 虛擬機中的上傳命令。
約定團隊開發流程，開發新需求時建立 feature/0.5.1(需求版本號) 分支，當 push 代碼時會自動觸發 CI 任務，並在虛擬機修改成 test 環境後提交體驗版。
發完測試報告後能夠將小程序提審時，咱們須要將 feature/0.5.1 分支 merge 到 audit 分支，此時會自動觸發 CI 任務，並在虛擬機修改成 production 環境後提交體驗版。 audit 分支須要添加爲受保護的分支，不容許直接 push 代碼，若是審覈沒經過那麼能夠以 audit 爲基礎新建 feature/0.5.2 分支進行調整後從新 merge 到 audit。
當審覈經過後咱們須要將 audit 分支代碼合併到 master 分支，master 分支應該永遠與線上代碼保持同步。

微信小程序工程化之持續集成方案