cover

本质上前端最终产物也是一些可部署的物料,只不过有特殊的地方是其在路径都生存在url 这种绝对路径中.相对于java 项目有自己的环境池子来承载其编译的过程,现代前端可以看做成基于构建工具(webpack/fis/gulp) 和babel 所承载的基础容器,其中babel 相当于javac 编译转换功能,而webpack 就是maven 的功能.这对于从java这种已经非常稳定的结构化构建的开发生态角度来审视前端构建的过程是非常具有借鉴意义的.

-- 要做一件事,首先要明确目标,要达成什么目标,解决什么痛点? 前端开发传统上一直都是本地跑起来,然后部署到测试服务器上,测试,修改,再测试,再修改.线上预环境测试,修改,再预部署,其中现在由于有了webpack 这种能够帮你自动化处理的能力,使得打包过程像极了当年ssh 项目,每次编译的时候就是喝个咖啡去了.后来maven来了解决了构建引用问题,使得编译在服务器上运行更高效了.可以从这里学习一下前辈.

jenkins 安装和 Node 环境安装

jenkins 需要java 环境,centos中使用yum install 即可.node 同样.

1.首先,前端编译环境搭建.

node 环境 ,jenkins 环境,以及相关连的插件,重要的插件有,gitlab,gitlab hook.

2.拉取代码.首先配置jenkins 访问gitlab 的 key .

3.配置

前端的构建基本都基于node 插件来搞的,但是由于没有统一的插件规范来约束,所以每个项目的编译和发布都需要自己去写脚本来实现.总体来说,都是bash调用nodejs 命令来实现的.具体需要以下几点:
构建参数,环境变量设定,以及编译结果通知

构建参数:倘若一个前端项目只有一个,那么可以不用考虑这部分,但是绝大多数项目都是公用库和具体项目库在一起的多项目方式.故需要传入项目名来构建参数,这里引用 Filesystem List Parameter Plug-in插件进行项目目录名选择. 参数化构建

webhook和jenkins相互配置,实现合并代码就自动编译功能:
gitlab 中的配置

构建命令.

在jenkins 项目配置中,shell地方才是构建命令执行的地方.通常前端需要在这个地方做两个事情: 1. git 拉取对应分支的代码.(此处的分支,既可以是固定分支名,又可以使用参数化构建选择或者填入分支名.) 2.执行编译命令,这里面可以使用bash/node 命令以及引用上面自定义的参数和jenkins全局环境变量,这些变量可以用来构建,可以用来打印日志,或者自定义编译log头信息.

最后编译的结果可以像我栗子一样直接推送到cdn 节点上,然后将入口页面拎出来到另外一台机器上,前提是里面的publishpath 已经都是绝对地址了.

另外好看的UI oceanBlue 已经出了,非常漂亮:

支付宝扫码打赏 微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章

王琢

态度 哲学 以及爱

peking