一段自动编译前端项目的Shell代码，如果没有上集成工具的话，略有小用。

Posted 2022-07-29 FungLeo

临时构建一个前端项目的服务器，由于前端项目有十几个，每次git拉代码以及运行编译命令，搞得烦不胜烦。关键是，全是命令行操作，让其他人不太愿意操作。因此，写了这样一个脚本，便于操作，也可以用于后续的系统集成。

前端项目都是 vue-cli 脚手架开发，统一由 git 进行代码管理，编译后的文件在源代码的 dist 目录，nginx 已经配置指向这些目录，所以不需要额外的复制代码工作。如果有不需要的话，可以追加 cp 或者 scp 等命令，用于将代码复制或上传到其他设定目录。

执行命令后，会列出所有前端项目的目录名称，别给出序号。手工输入要编译的序号后，将编译该项目。

在大多数情况下，是不需要重新 npm install 命令重新安装依赖的，但是不排除有特殊情况，因此，做了一个判断，默认是不重新安装依赖。

编译安装完成后，会提示，是否需要重启Nginx，一般情况下是不需要的，但如果需要的话，也支持重启。然后任务就完成了。

但是，如果仅仅支持手工执行该脚本的话，则意义不大，后续肯定要上类似jenkins管理工具的。所以，为了支持调用，还增加了跟随项目名称参数后，自动执行，无需人为干预。

在这种模式下，将会全新安装依赖，以及重启Nginx。

完整代码如下：

#!/bin/bash

upNpm () 
  echo "NPM 正在更新"
  npm i
  echo "NPM 更新完成"
  git checkout package-lock.json


reloadNginx () 
  nginx -s reload
  echo "如果上一行没有消息推送的话，则已经成功重启，否则请自行排查"


dir=/srv/web-fe/
echo -e "\\033[32m-- 前端代码开发环境部署命令行工具 --\\033[0m"
echo "                    --by FungLeo"
if [ "x$1" != "x" ];then
  echo "您要编译的是 $1 项目"
  project=$1
else
  echo -e "\\033[36m* 当前共有如下前端项目可以编译\\033[0m"
  arr=($(ls $dir))
  i=0
  for s in $arr[@];do
    echo -e "\\033[33m$i\\033[0m ----- $s"
    let i+=1
  done
  echo -e "\\033[32m* 请输入要编译的项目的序号 \\033[31m只能为正整数哦 *^_^*\\033[0m"
  read -p ">>> " index

  length=$#arr[@]
  if [ $index -ge $length ]; then
    echo -e "\\033[31m* 输入的数字大于项目总数 >_< \\033[0m程序自动退出"
    exit
  fi
  project=$arr[index]
fi
doPro=$dir$project
if [ ! -d "$doPro" ];then
  echo -e "\\033[31m 您要部署的项目不存在，程序自动退出 \\033[0m"
  exit
fi
echo -e "正在编译\\033[31m $project \\033[0m项目"
cd $doPro
echo "拉取最新项目代码"
git pull
echo '代码更新成功'
if [ "x$1" != "x" ];then
  upNpm
else
  echo -e "\\033[32m* 是否需要NPM重新安装? y/N\\033[0m"
  read -p ">>> " yn
  if [ "$yn" == "Y" -o "$yn" == "y" ]; then
    upNpm
  fi
fi
echo -e '\\033[36m* 项目开始编译\\033[0m'
npm run build
echo -e '\\033[36m* 项目编译完成\\033[0m'
if [ "x$1" != "x" ];then
  reloadNginx
else
  echo -e "\\033[32m* 是否需要重启Nginx? y/N\\033[0m"
  read -p ">>> " yn
  if [ "$yn" == "Y" -o "$yn" == "y" ]; then
    reloadNginx
  fi
fi
echo -e '\\033[32m* 任务完成，程序自动退出\\033[0m'
exit

很久没有写 Shell 代码了，显得比较生疏，逻辑也比较浅显，各位看官见谅了。

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。