持續集成（Continuous integration，簡稱CI)系統在軟件自動化構建（包括編譯、發布、自動化測試）方面有著重要的作用，在之前，前端項目簡單，很多時候發布都只是一些簡單的拷貝，而隨著webpack web打包工具的誕生，前端項目越來越復雜，大多數項目都需要一個構建的流程，在這個時候我們自然而然想到了jenkins，于是將前端項目也集成到了jenkins, 事情到這里還算完美，直到有一天.......

那還是我在上一家公司時候，有一天我突然了解到公司的前端團隊項目打包發布是用自己寫的一套打包系統之后，我很驚訝，為什么不用jenkins? 才發現，其實很多只做過前端的并不是很了解持續集成這些，想來也是，前端之前的開發模式基本都不用打包構建，發布時都是把所有的模板、資源打包（壓縮）發給運維。于是我看了一下他們那個打包的系統，也只是可以完成線上打包的功能，對實時日志、構建隊列、構建觸發器等都不支持，于是我就開始給他們安利jenkins，但是，現有的系統系統雖然簡陋但也能用，大家心里其實是拒絕的。強推應該不是上策，于是我就說如果現在這個構建系統能夠支持實時日志和任務隊列的話也是不錯的，大家一看，這開發量可不小，還不如遷移到了jenkins呢， 于是前端的項目就遷移到了jenkins.......

故事到這里還沒完。

沒有什么能夠阻擋人類的好奇心啊。事后我心里就想著如果能夠我們自己做一個前端構建系統，要支持實時日志和任務隊列，應該怎么做。

正巧，雖然jenkins本身功能很強大，但是，也有一點有些不足，就是打包日志不能像本地一樣帶有格式，如日志文字顏色、字體等，這樣的話，就不能像在本地打包一樣快速的定位錯誤。然后百度了一圈，發現有一個插件，叫 AnsiColor, 心中大喜，立馬重新build，但是發現日志的格式化功能非常的弱，以一個vue工程為例，輸出的日志本應顯示紅色的（構建過程出錯）的都是黑色，真是差強人意。于是我就想著自己寫一套前端專用的ci, 當然不是為了重復發明輪子，純粹手癢。

要實現的目標

支持實時日志，并有良好的格式

支持任務隊列

支持觸發器

技術點：

任務隊列可以在服務端維護一個全局的任務列表

實時日志用websocket將服務端的打包信息實時的同步到頁面上

日志格式化可以百度 “ANSI控制碼”，我們解析ANSI控制碼來應用自定義樣式。

觸發器可以通過項目配置腳本，在關鍵點觸發某個自定義腳本

于是寫好就是這樣的:

頂部是項目信息，紅色烏云代表構建失敗，綠色的太陽代表構建成功。

構建日志格式化。

構建過程中打印實時日志

與多個構建任務時，排隊等候

總結

此項目是一個很好的練習項目，涉及前端、后臺、websocket、shell腳本。個人覺得很適合做一個畢業設計或實習作業。現在這個項目已經是我們前端實習生的必做項目了。

招賢納士

如果你是一個愛思考，愛動手，對編程有濃厚興趣的歡迎私信我。

總結

以上是生活随笔為你收集整理的自己写一个H5项目CI系统的全部內容，希望文章能夠幫你解決所遇到的問題。

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