由於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"]}}'

四、構建後操作

開啟高階，設定伺服器標籤：

Execcommand指令碼如下：

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

Execcommand指令碼如下：

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

下面是構建後推送構建結果到企業微信，此構建後步驟可以省略……

完成。