什么是前端自动化
前端自动化不是指自动生成代码,而是自动化构建项目。
如果没有自动化, 我们的前端从开发到提测工作流程可能如下:
1.本地机器上写代码
2.在命令行输入 npm run unit/lint,查看单元测试/eslint 校验结果
3.提交代码,push 到 git 远程仓库
4.执行 npm run build,构建项目
5.ssh/ftp 发包至测试服务器等各种方式
这个流程中,每一个步骤都要重复人工操作,很大增加了时间成本,不能保证操作的准确性。对于 unit 或者 build 的结果,没有一个自动的反馈机制,需要人工 check 运行结果,最后部署也是人工登录服务器执行脚本,非常繁琐。
引入自动化以后,整个流程变成:
1.本地机器上写代码
2.提交代码,push 到 git 远程仓库
3.git hook 触发 jenkins 的构建 job
4.jenkins job 中拉取项目代码,运行 npm run unit/lint 和 npm run build。
5.jenkins job 中执行测试服务器的部署脚本
在 自动化流程中,只有步骤 1 和步骤 2 需要人工操作,其他步骤都是自动运行,是一个非常标准化的流程,减少了人工操作的风险,省去了重复性工作,增强了项目的可见性。
效果图
实现
流程图
- 开发人员提交代码至代码库
- 触发 jenki 构建任务
- 构建成功,发包至 nginx 服务器,更新完毕
- 构建