自己写一个H5项目CI系统

╰+攻爆jí腚メ 2022-03-16 07:26 138阅读 0赞

持续集成（Continuous integration，简称CI)系统在软件自动化构建（包括编译、发布、自动化测试）方面有着重要的作用，在之前，前端项目简单，很多时候发布都只是一些简单的拷贝，而随着webpack web打包工具的诞生，前端项目越来越复杂，大多数项目都需要一个构建的流程，在这个时候我们自然而然想到了jenkins，于是将前端项目也集成到了jenkins, 事情到这里还算完美，直到有一天.......

那还是我在上一家公司时候，有一天我突然了解到公司的前端团队项目打包发布是用自己写的一套打包系统之后，我很惊讶，为什么不用jenkins? 才发现，其实很多只做过前端的并不是很了解持续集成这些，想来也是，前端之前的开发模式基本都不用打包构建，发布时都是把所有的模板、资源打包（压缩）发给运维。于是我看了一下他们那个打包的系统，也只是可以完成线上打包的功能，对实时日志、构建队列、构建触发器等都不支持，于是我就开始给他们安利jenkins，但是，现有的系统系统虽然简陋但也能用，大家心里其实是拒绝的。强推应该不是上策，于是我就说如果现在这个构建系统能够支持实时日志和任务队列的话也是不错的，大家一看，这开发量可不小，还不如迁移到了jenkins呢， 于是前端的项目就迁移到了jenkins.......

故事到这里还没完。

没有什么能够阻挡人类的好奇心啊。事后我心里就想着如果能够我们自己做一个前端构建系统，要支持实时日志和任务队列，应该怎么做。

正巧，虽然jenkins本身功能很强大，但是，也有一点有些不足，就是打包日志不能像本地一样带有格式，如日志文字颜色、字体等，这样的话，就不能像在本地打包一样快速的定位错误。然后百度了一圈，发现有一个插件，叫 AnsiColor, 心中大喜，立马重新build，但是发现日志的格式化功能非常的弱，以一个vue工程为例，输出的日志本应显示红色的（构建过程出错）的都是黑色，真是差强人意。于是我就想着自己写一套前端专用的ci, 当然不是为了重复发明轮子，纯粹手痒。

### 要实现的目标 ###

1.  支持实时日志，并有良好的格式
2.  支持任务队列
3.  支持触发器

### 技术点： ###

1.  任务队列可以在服务端维护一个全局的任务列表
2.  实时日志用websocket将服务端的打包信息实时的同步到页面上
3.  日志格式化可以百度 “ANSI控制码”，我们解析ANSI控制码来应用自定义样式。
4.  触发器可以通过项目配置脚本，在关键点触发某个自定义脚本

于是写好就是这样的:

顶部是项目信息，红色乌云代表构建失败，绿色的太阳代表构建成功。

构建日志格式化。

构建过程中打印实时日志

与多个构建任务时，排队等候

### 总结 ###

此项目是一个很好的练习项目，涉及前端、后台、websocket、shell脚本。个人觉得很适合做一个毕业设计或实习作业。现在这个项目已经是我们前端实习生的必做项目了。

### 招贤纳士 ###