持續整合（Continuous integration，簡稱CI)系統在軟體自動化構建（包括編譯、釋出、自動化測試）方面有著重要的作用，在之前，前端專案簡單，很多時候釋出都只是一些簡單的拷貝，而隨著webpack web打包工具的誕生，前端專案越來越複雜，大多數專案都需要一個構建的流程，在這個時候我們自然而然想到了jenkins，於是將前端專案也整合到了jenkins, 事情到這裡還算完美，直到有一天.......
那還是我在上一家公司時候，有一天我突然瞭解到公司的前端團隊專案打包釋出是用自己寫的一套打包系統之後，我很驚訝，為什麼不用jenkins? 才發現，其實很多隻做過前端的並不是很瞭解持續整合這些，想來也是，前端之前的開發模式基本都不用打包構建，釋出時都是把所有的模板、資源打包（壓縮）發給運維。於是我看了一下他們那個打包的系統，也只是可以完成線上打包的功能，對實時日誌、構建佇列、構建觸發器等都不支援，於是我就開始給他們安利jenkins，但是，現有的系統系統雖然簡陋但也能用，大家心裡其實是拒絕的。強推應該不是上策，於是我就說如果現在這個構建系統能夠支援實時日誌和任務佇列的話也是不錯的，大家一看，這開發量可不小，還不如遷移到了jenkins呢， 於是前端的專案就遷移到了jenkins.......
故事到這裡還沒完。
沒有什麼能夠阻擋人類的好奇心啊。事後我心裡就想著如果能夠我們自己做一個前端構建系統，要支援實時日誌和任務佇列，應該怎麼做。
正巧，雖然jenkins本身功能很強大，但是，也有一點有些不足，就是打包日誌不能像本地一樣帶有格式，如日誌文字顏色、字型等，這樣的話，就不能像在本地打包一樣快速的定位錯誤。然後百度了一圈，發現有一個外掛，叫 AnsiColor, 心中大喜，立馬重新build，但是發現日誌的格式化功能非常的弱，以一個vue工程為例，輸出的日誌本應顯示紅色的（構建過程出錯）的都是黑色，真是差強人意。於是我就想著自己寫一套前端專用的ci, 當然不是為了重複發明輪子，純粹手癢。
要實現的目標
- 支援實時日誌，並有良好的格式
- 支援任務佇列
- 支援觸發器
技術點：
- 任務佇列可以在服務端維護一個全域性的任務列表
- 實時日誌用websocket將服務端的打包資訊實時的同步到頁面上
- 日誌格式化可以百度 “ANSI控制碼”，我們解析ANSI控制碼來應用自定義樣式。
- 觸發器可以通過專案配置指令碼，在關鍵點觸發某個自定義指令碼
於是寫好就是這樣的:
頂部是專案資訊，紅色烏雲代表構建失敗，綠色的太陽代表構建成功。
構建日誌格式化。
構建過程中列印實時日誌
總結
此專案是一個很好的練習專案，涉及前端、後臺、websocket、shell指令碼。個人覺得很適合做一個畢業設計或實習作業。現在這個專案已經是我們前端實習生的必做專案了。
招賢納士
如果你是一個愛思考，愛動手，對程式設計有濃厚興趣的歡迎私信我。