前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一段自动编译前端项目的Shell代码,如果没有上集成工具的话,略有小用。

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

作者头像
FungLeo
发布2019-08-29 14:27:12
6680
发布2019-08-29 14:27:12
举报
文章被收录于专栏:地方网络工作室的专栏

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

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

在这里插入图片描述
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述

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

完整代码如下:

代码语言:javascript
复制
#!/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 代码了,显得比较生疏,逻辑也比较浅显,各位看官见谅了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年08月23日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档