由于H5前端打包需要用到npm，所以Jenkins服务器需要先安装好nodejs及npm（安装比较简单，随便百度一下就有教程） 。

首先看一下构建页面：

 

 

Job工程配置及脚本：

一、参数配置：

git参数配置

 

 服务器选择参数

 

 其他参数：

 

 

 

 

 

 二、源码管理

 

 三、构建步骤

安装npm依赖，以及npm打包，最后把打的包分客户端和服务端各自打成gz包，以方面推送到各自的服务器上面，并把部署通知到企业微信

 

 脚本如下：

#!/bin/sh -l
git rebase origin/$GITBranch;
if [ -d "$WORKSPACE/dist" ];then
rm -rf $WORKSPACE/dist
fi
# 更换淘宝源
# npm config set registry https://registry.npm.taobao.org ;

if [ $DeleteNM == Y ];then
rm -rf node_modules
fi

echo 开始构建：$pro_name

echo 安装依赖: 执行npm install
npm install npm -g
npm install --registry https://registry.npm.taobao.org

echo 执行build: npm run build:test
npm run build:test
echo 进入dist目录
cd dist

echo 把assets打包为Client.tar.gz，除了pm2.json外其他打包为Server.tar.gz
tar -zcvf Client.tar.gz assets
sleep 1
tar --warning=no-file-changed -zcvf Server.tar.gz *  --exclude=pm2.json --exclude=Client.tar.gz
cd -

curl 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=f088b2d7-6cd0-488d-a28d-2e4c9babb78b' -H 'Content-Type: application/json' -d '{"msgtype":"text","text":{"content":"部署提醒\r\nLuckyPanda-Front开始部署...\r\n大概2~3分钟~~","mentioned_list":["@all"]}}'

 

四、构建后操作

 

 打开高级，设置服务器标签：

 

Exec command脚本如下：

cp /home/wtttest/dist/Client.tar.gz $ClientDist
echo 解压$ClientDist目录的Client.tar.gz包到当前目录
cd $ClientDist
tar zxvf Client.tar.gz
echo 解压完成，删除掉Client.tar.gz
rm -rf Client.tar.gz
rm -rf /home/wtttest/dist/Client.tar.gz

 

 Exec command脚本如下：

echo 解压$ServerDist目录的Server.tar.gz包到当前目录
cd $ServerDist
tar zxvf Server.tar.gz
echo 解压完成，删除掉Server.tar.gz
rm -rf Server.tar.gz
echo 重启服务LuckyPanda
pm2 restart pm2.json
pid=`pm2 list|grep panda-app|awk '{print $12}'`
if [ "${pid}" ]; then
    echo "restart ok,server is running and pid=$pid"
    echo 部署完成
else
   echo "restart fail,server is not started"  
    exit 1
fi

下面是构建后推送构建结果到企业微信，此构建后步骤可以省略……

 

完成。