本身寫一個H5項目CI系統

持續集成(Continuous integration,簡稱CI)系統在軟件自動化構建(包括編譯、發佈、自動化測試)方面有着重要的做用,在以前,前端項目簡單,不少時候發佈都只是一些簡單的拷貝,而隨着webpack web打包工具的誕生,前端項目愈來愈複雜,大多數項目都須要一個構建的流程,在這個時候咱們天然而然想到了jenkins,因而將前端項目也集成到了jenkins, 事情到這裏還算完美,直到有一天.......前端

那仍是我在上一家公司時候,有一天我忽然瞭解到公司的前端團隊項目打包發佈是用本身寫的一套打包系統以後,我很驚訝,爲何不用jenkins? 才發現,其實不少只作過前端的並非很瞭解持續集成這些,想來也是,前端以前的開發模式基本都不用打包構建,發佈時都是把全部的模板、資源打包(壓縮)發給運維。因而我看了一下他們那個打包的系統,也只是能夠完成線上打包的功能,對實時日誌、構建隊列、構建觸發器等都不支持,因而我就開始給他們安利jenkins,可是,現有的系統系統雖然簡陋但也能用,你們內心實際上是拒絕的。強推應該不是上策,因而我就說若是如今這個構建系統可以支持實時日誌和任務隊列的話也是不錯的,你們一看,這開發量可不小,還不如遷移到了jenkins呢, 因而前端的項目就遷移到了jenkins.......vue

故事到這裏還沒完。webpack

沒有什麼可以阻擋人類的好奇心啊。過後我內心就想着若是可以咱們本身作一個前端構建系統,要支持實時日誌和任務隊列,應該怎麼作。web

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

要實現的目標

  1. 支持實時日誌,並有良好的格式
  2. 支持任務隊列
  3. 支持觸發器

技術點:

  1. 任務隊列能夠在服務端維護一個全局的任務列表
  2. 實時日誌用websocket將服務端的打包信息實時的同步到頁面上
  3. 日誌格式化能夠百度 「ANSI控制碼」,咱們解析ANSI控制碼來應用自定義樣式。
  4. 觸發器能夠經過項目配置腳本,在關鍵點觸發某個自定義腳本

因而寫好就是這樣的:編程

頂部是項目信息,紅色烏雲表明構建失敗,綠色的太陽表明構建成功。websocket

日誌格式化

構建日誌格式化。運維

實時日誌

構建過程當中打印實時日誌前端構建

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

總結

此項目是一個很好的練習項目,涉及前端、後臺、websocket、shell腳本。我的以爲很適合作一個畢業設計或實習做業。如今這個項目已是咱們前端實習生的必作項目了。socket

招賢納士

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

相關文章
相關標籤/搜索