本文首发微信公众号：前端徐徐。
大家好，我是徐徐。今天跟大家聊聊前端研发链路中的 CI/CD。
前言
在现代的前端开发工程体系中，CI/CD 在里面扮演着重要的角色，它的出现改变了前端发布的方式，为构建大型应用提供了有利的基础设施，本片文章将分别从CI/CD产生的背景及意义，以及其运作方式和常用的工具来简单探讨一下，希望可以给你带来帮助。
CI/CD是从哪里来的？
从前的软件开发
想象一下，你在搭积木。以前的软件开发就像是你先设计好整个城堡，然后从底到顶一块块搭建，直到全部完成才能看到成果。这种方式叫"瀑布式"开发，就像水从高处流到低处，一步接一步。
新的玩法：敏捷开发
后来，人们发现这样做太慢了，而且容易出错。于是就有了新的玩法，叫"敏捷开发"。这就像是你搭一小部分，玩一下，觉得不好就快速调整，不断重复这个过程。这样做更灵活，也更容易适应变化。
CI的诞生
在敏捷开发中，有个聪明人（Martin Fowler）想到：为什么不经常把大家的积木拼在一起看看呢？这样可以早点发现哪里不对劲。这个想法就是CI（持续集成）的开始。
从CI到CD
CI让大家更容易发现问题，但是把积木（程序）搬到展示台（服务器）上还是很麻烦。于是人们又想到，能不能让这个过程也自动化呢？这就是CD（持续交付/部署）的由来。
云计算和DevOps推波助澜
随着云计算的出现，以及开发人员和运维人员开始更好地合作（DevOps），CI/CD变得更加容易实现和普及。
前端开发也要用CI/CD
现在的网页越来越复杂，就像是从搭简单的小房子变成了搭复杂的城堡。这时，CI/CD在前端开发中就显得特别重要了。它帮助开发人员更容易地管理这些复杂的"城堡"。
CI/CD到底是什么？
简单说说CI/CD
- CI（持续集成）：就像是经常检查你的作业，及时发现并改正错误。
- CD（持续部署）：把检查过的作业自动交给老师（上传到服务器）。
为什么CI/CD这么重要？
- 减少错误：经常检查，问题不容易积累。
- 加快速度：自动化流程，省去了很多手动操作。
- 降低风险：小步快跑，每次改动都不会太大。
- 团队协作更顺畅：大家的代码经常合在一起，减少冲突。
前端开发的CI/CD是怎么运作的？
下面画了一个大概的CI/CD的运作流程图，仅供参考。
1. 提交代码
- 用Git管理代码，就像是给你的积木拍照片，记录每一次改动。
- 使用分支策略，相当于在不同的桌子上搭积木，互不影响。
2. 自动构建
- 用工具（如Webpack）把你的代码积木变成一个完整的作品。
3. 自动测试
- 单元测试：检查每个小零件是否正常工作。
- 集成测试：检查零件组合在一起是否正常。
- E2E测试：模拟用户操作，看看整个作品是否正常运转。
4. 代码质量检查
- 用工具检查代码是否整洁、是否有明显的错误。
- 确保所有人的代码风格一致，就像确保所有积木的颜色和形状匹配。
5. 自动部署
- 把检查通过的作品自动放到展示台上（测试服务器、预发布服务器、正式服务器）。
当然，上面提到的至少一些核心的步骤，最主要的还是根据自己的需要，自定义多种脚本去满足自己的发布需求。
常用的CI/CD工具
下面列举一些常用的CI/CD工具，每个工具都有自己的特点，大家可以各取所需。
- Jenkins：像是一个勤劳的助手，帮你完成各种自动化任务。
- GitLab CI/CD：直接集成在GitLab代码仓库中的自动化工具。
- Travis CI：云端的CI服务，特别适合开源项目。
- CircleCI：另一个流行的云端CI/CD平台。
- GitHub Actions：GitHub自家的CI/CD服务，与GitHub无缝集成。
小贴士
说了这么多，来点我日常开发的一些小技巧吧。
- 经常提交小改动，不要攒一大堆再提交。
- 能自动化的就自动化，省时省力。
- 保证快速反馈，CI/CD过程要够快。
- 把CI/CD的配置文件也放在代码仓库里管理。
- 确保开发、测试和生产环境尽可能一致，避免"我这里能运行"的问题。
- 在CI/CD过程中加入安全检查，防患于未然。
总结
在前端开发中使用CI/CD，就像是给自己找了一个得力助手。它帮你自动完成很多繁琐的工作，让你可以专注于创造性的任务。通过自动化的构建、测试和部署，你和你的团队可以更快地交付高质量的产品，同时还能降低出错的风险。
所以，如果你还没有在你的前端开发流程中引入CI/CD，不妨试试看，你会发现开发工作变得更加轻松和高效，个人觉得 GitHub Actions 真的非常好用，欢迎和我探讨。
