由于此次H5前端项目是多子项的前端项目,所以用到多参数构建。

下面先看一下构建页面如下:

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_H5打包

 

 

 

接下来开始参数配置和脚本编写:

一、参数配置

git参数

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_Jenkins_02 Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_H5打包_03

 

 

 

子项参数,需要用到插件Extended Choice Parameter,可在Jenkins插件中心下载安装

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_Jenkins_04Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_Jenkins_05

 

 

环境参数

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_Jenkins_06

 

 

服务器参数

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_压缩包_07Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_压缩包_08

 

 

项目部署所在的目录参数

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_git_09

 

 

 

二、源码管理

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_H5打包_10

 

 

 

三、构建步骤

构建依赖以及编译打包,使用shell脚本完成

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_压缩包_11

 

 以下是完整脚本:


Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_压缩包_12Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_Jenkins_13


#!/bin/sh -l
# 项目名
pro_name=$JOB_BASE_NAME;
# 获得需要打包的子项
str=$Choiceiterms;
echo 参数Choiceiterms:$str
if [ "$str" == "" ];then
echo Error:参数Choiceiterms您没有选择,没有可编译打包的子项!!!
exit 1
fi
# 将拉下的代码与本地代码合并
git rebase origin/$GITBranch;

# 以,分隔符进行分割
dirs_arr=${str//,/ };

# 更换淘宝源
npm config set registry https://registry.npm.taobao.org ;

# 判断上次新建build文件是否存在,存在则删掉其中的内容
if [ -d "$pro_name" ];then
echo "$pro_name 文件夹存在,删除文件夹里的内容";
rm -rf $pro_name/*;
else
echo "$pro_name 文件夹不存在,新建";
mkdir $pro_name;
fi;

# 判断上次新建的压缩包是否存在,存在删除掉
if [ -f "$pro_name.tar" ];then
echo "$pro_name.tar 存在,删除";
rm -f "$pro_name.tar";
else
echo "$pro_name.tar 不存在";
fi;


# 循环进入每个目录分别进行编译
for i in ${dirs_arr[*]};
do
echo "现在进行的是$i子项";
cd $i;

# 截取获取-后面的内容
#i=${i#*-};

# 下载依赖包
echo npm install
npm install;



# 若是测试环境,则按照test进行编译,生产环境按照prod编译
if [ "$env" = "test" ];then
echo "构建测试环境包,运行npm run build:test";
npm run build:test;

elif [ "$env" = "prod" ];then
echo "构建生产环境包,运行npm run build:prod";
npm run build:prod

else
echo "不支持该方式";
fi;

echo "创建$i 对应文件夹";
mkdir $i;

# 将build文件夹移到子项目文件夹
echo "将build 文件夹移到$i子项文件夹中";
echo | pwd;
cp -r build/* $i/;

# 将子项文件夹移动到$JOB_BASE_NAME文件夹中
echo "将build 后$i子项文件夹移动到项目$pro_name文件夹";
cp -r $i ../$pro_name/ ;

# 返回项目根目录
cd ..;

done
# 将存放build的文件夹压缩
echo 创建压缩包$pro_name.tar
tar -czvf $pro_name.tar $pro_name ;

View Code

四、构建后步骤

 

推送到服务并且替换原来的包

Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_Jenkins_14

 

 完整脚本如下:


Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_压缩包_12Jenkins--H5 front前端自动化部署(Jenkins服务在Linux系统)_Jenkins_13


#!/bin/bash
# 输出当前目录
echo | pwd;
# 获得项目目录
pro_name=$JOB_BASE_NAME;
#复制压缩文件到指定目录/images/ums-front
cp $pro_name.tar $ProDir
echo 跳到项目目录cd $ProDir
cd $ProDir;
echo 解压缩文件$pro_name.tar
tar -zxvf $pro_name.tar;
pwd;
# 复制要替换的子项内容出来
cp -rf $pro_name/* .;
# 删除压缩包
rm -rf $pro_name.tar;
rm -rf $pro_name;

View Code

完成。~

 


晚生不才,请多指教!