背景

1年前入職時，公司前端部門的靜態代碼部署都是用ftp工具拖拽部署，沒有記錄，沒有關聯，經常造成許多困擾的問題，

比如：今天有沒有其他人在我要部署的路徑上工作？我的代碼為啥被蓋掉了？被誰蓋掉的？啥時候蓋掉的？

本地build，ftp拖拽部署這種方式，導致git版本與手動的構建、部署沒啥關聯，更有在本地寫完代碼部署上去后，壓根沒傳git這種失誤可能發生。

靠人去遵守規范來控制工作流，總會有失誤、疏忽的發生。

想法

要靠機器和代碼去規范工作流，提高效率、準確性，實現真正的前端工程化。

具體目標

不討論通用模板(項目開發層面)，只關心構建以后的事情，精確的說，就是從npm run build:xxx 這個腳本開始對接，npm run build:xxx之前的事情不在本文討論范圍內。 實現構建-部署-測試(多個環境)-沙箱-上線(可回滾)的全部半自動化流程把控。

為什么選擇jenkins：優先選擇強大的開源工具，避免重復造輪子，主要原因是插件特別豐富，基本可以滿足所有實際需求

先把成果貼上來，整體示意圖

核心思想是分離構建、部署，所以每個項目，jenkins會建兩個job。

jenkins服務部署在公司內網堡壘機上，使用tomcat管理jenkins的war包，占用系統服務、全量部署定時任務都跑在同一臺堡壘機上(Linux)。

因為內容很多，所以我直接采用一張圖 + 注釋 來零碎的講解每個功能的實現，因為每個公司的前端業務環境都不一樣，所以我也不打算花太大的筆墨去描述所有的實現。寫這篇文章的目的就是可能某個思想、某一段對jenkins插件的使用等等會幫助到有類似需求的人。注釋會是截圖，或者是關鍵代碼，對應圖中的數字。

先放幾張實際使用的圖

jenkins項目界面部分截圖

構建job部分截圖

部署job部分截圖（使用jenkins-pipeline實現流程圖）

多套測試環境占用系統部分截圖（占用環境后別人無法部署，全量腳本也不會覆蓋）

全量部署腳本日志展示部分截圖

整體示意圖的注釋（每一條都對應示意圖中的紅色阿拉伯數字）：

構建和部署分離開來，便于后續的各種操作，比如全量部署、分環境部署、回滾代碼等都是不需要構建操作的，耦合在一起會做很多無用功。

同上

一次構建三個包，保證了測試環境和沙箱、線上的構建環境/副作用參數的一致性（用shell腳本實現，具體如何實現不細說，就是循環變量執行npm腳本，shell腳本由git倉庫管理，jenkins配置時統一拉取代碼，這樣所有的項目配置可以同步。示例如下）

4. 下圖展示了部署job可操作的選項

上圖中有說明

貼一段jenkinsfile代碼，語法為pipeline script

原理同6

占用系統是另外開發的，配套使用，上面有占用系統的示意圖，是用node做后臺，vue+element做前臺快速開發的，這里不展開說；

這個利用jenkins的Url Auth Plugin，再開發一下對接公司統一登錄系統的api，就可以直接用了，本質上是圍繞cookie來進行的，每個公司都有自己的統一登錄(也可能沒有，那就使用jenkins自帶的用戶系統)，這里不展開說。

全量部署腳本用corntab，用node腳本實現，核心思想在于讀取說明6中的"now_online.json"來得知是哪一個包是線上的，取到這個包，同步到所有測試環境。同時檢測是否有改動，沒改動則跳過；同時檢測說明8中的標記，查明環境是否有人占用，占用也跳過。上面我有貼日志的截圖。

這里的意思就是，構建任務還沒執行完的時候，打開了部署任務進行部署，此時要檢查一下構建任務是否插入了構建完成的標記，不然不能部署。

這里是我自認為最大的亮點，“如何保證當前分支上的代碼絕對不落后于master”？我們都知道master上的代碼即是線上最新代碼，當多人協作開發的時候，有人先上線，此時master代碼更新，而后上線的人還在用老的代碼測試、上線，這樣就會造成問題，除了人為保證主動去pull代碼，有沒有更可靠的方式？ 這里就是工程化的一大亮點，我們設想，如果后上線的人的分支上有落后于master的代碼，那么我們就不讓jenkins的構建/部署成功！ 如何通過代碼實現并整合進jenkins？我研究了一下git的命令，如果執行 git log [你的當前分支]..origin/master 打印了空值，那么說明當前分支沒有落后，如果打印了內容，那么就說明分支落后與master！具體用shell實現示例：

check_results=`git log $branchName..origin/master` if [[ ! $check_results = "" ]]thenecho "【Error】：當前代碼比master落后，需要合并master或更新代碼重新打包之后才能進行構建！"exit 1elseecho "【info】:當前代碼正常，可以部署！" fi 復制代碼

沒太多好說的，打包出來的dist文件夾額外用eslint檢測一下就好，shell腳本實現。

通過說明6中的pipeline script 中的 input 語法實現

回滾的關鍵代碼也在說明6中有。

整篇文章比較零散，主要講了一下我對前端工程化探索的思想和實踐，因為手頭的需求也很多(18年一起工作的好幾個小伙伴被裁了，你猜他們剩下的工作誰來做)，斷斷續續搞了兩三個月，目前這套系統已經穩定運行幾個月了，不斷的完善使它現在很好用，線上再也不會出現因為忘了某些分支操作導致的bug；這套系統的優點就是，基于開源jenkins+核心思想，就可以很快的通過node/shell/pipelinescript搭建起一套完整的系統，成本極低！超級實用的功能卻實現很多！

如果你覺得讀完沒啥收獲或我寫的實在不知所云，那就好好看看說明12，我覺得把這一個小技巧分享出去，并且讓你有所收獲，那也值了，畢竟寫作能力有限~

總結

以上是生活随笔為你收集整理的前端工程化：围绕Jenkins打造工作流的过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。