Vue/React项目中不可忽视的自动化部署方案

本文主要介绍shell脚本的项目一些基本用法以及在前端项目中的应用。将围绕以下几点来展开：

shell基本用法(变量，中不自动循环，可忽传参，视的署方运算符，化部流程控制等) 使用shell脚本自动将项目打包部署到git服务器 使用nodeJs编写命令行工具

一、项目shell基本介绍及用法

Shell 是中不自动一个用 C 语言编写的程序，它是可忽用户使用 Linux 的桥梁，业界所说的视的署方 shell 通常都是指 shell 脚本，Shell 编程跟 java、化部php 编程一样，项目只要有一个能编写代码的中不自动文本编辑器和一个能解释执行的脚本解释器就可以了。Linux 的可忽 Shell 种类众多，在这里我们介绍一种常用且开源免费的视的署方shell——bash。

1.Shell 变量

变量声明如下：

time=10 

注：变量名和等号之间不能有空格，化部变量名命名规则如下：

命名只能使用英文字母，数字和下划线，首个字符不能以数字开头。 中间不能有空格，高防服务器可以使用下划线(_)。 不能使用标点符号。 不能使用bash里的关键字(可用help命令查看保留关键字)

我们可以通过如下方式使用变量：

name="xujiang" echo $name # 或者这样 echo ${ name} 

我们能使用如下方式删除变量：

unset name 

关于shell变量的更多用法，可以参考linux官网，这里就不过多介绍了。

2.Shell 传递参数

我们可以在执行 Shell 脚本时，向脚本传递参数，脚本内获取参数的格式为：。代表一个数字，为执行脚本的第一个参数，为执行脚本的第二个参数，以此类推其中

n。n代表一个数字，1为执行脚本的第一个参数，2为执行脚本的第二个参数，以此类推,其中0 为执行的文件名

使用如下：

echo "文件名：$0"; echo "参数一：$1"; echo "参数二：$2"; echo "参数三：$3"; # 输出 文件名：./test.sh 参数一：1 参数二：2 参数三：3 

3.Shell 数组

Bash Shell 只支持一维数组，数组元素的下标由0开始。Shell 数组用括号来表示，元素用"空格"符号分割开，例如：

names=(name1 ... namen) 

我们可以通过如下方式读取数组：

${ names[0]} 

我们可以使用@ 或 * 可以获取数组中的所有元素，例如：

echo "数组的元素为: ${ nsmes[*]}" # 输出为 数组的元素为: A B C D 

4.Shell 基本运算符

Shell支持多种运算符，源码库如下：

算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符

原生bash不支持简单的数学运算，但是可以通过其他命令来实现，这里我们使用expr。它是一款表达式计算工具，使用它能完成表达式的求值操作。例如：

#!/bin/bash total=`expr 2 + 2` echo "两数之和为 : $total" 

注：这里我们使用反引号``。由于命令行工具这块用的比较少，如果感兴趣，大家可以去官网了解学习。

5.Shell echo命令

Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出，这里我们着重介绍与用户交互的输入输出。

#!/bin/sh read name  echo "hello $name" 

read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量。当我们执行脚本后，输入一个自定义名称，按下回车将输出 hello xxx,我们是不是想到了vue脚手架中的一些命令呢，是的服务器托管，我们可以用这个方法去实现自己的脚手架配置或者自动生成项目模版。

我们也可以用echo将显示结果定向至文件：

echo "It is mine" > test.js 

执行 这个文件后将为我们创建一个test.js文件，并将输出内容写入test.js。

6.Shell test 命令

test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。

数值测试：

-eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真

使用方式如下：

name1=1 name2=1 if test $[name1] -eq $[name2] then     echo 相等！ else     echo 不相等！ fi 

运行脚本后将输出相等!。

字符串测试：

= 等于则为真 != 不相等则为真 -z 字符串 字符串的长度为零则为真 -n 字符串 字符串的长度不为零则为真

例如：

name1="xu" name2="xu" if test $name1 = $name2 then     echo 两个字符串相等! else     echo 两个字符串不相等! fi 

7.Shell 流程控制

流程控制我们主要介绍if else， if else-if else和for循环。

if else if 条件1 then     命令操作1 else     命令操作2 fi  if else-if else a=1000 b=2000 if [ $a == $b ] then    echo "a 等于 b" elif [ $a -gt $b ] then    echo "a 大于 b" elif [ $a -lt $b ] then    echo "a 小于 b" else    echo "无" fi  for 循环 # 一般格式 for var in a1 a2 ... aN do     命令1     命令2     ...     命令N done 

在了解完如上知识点后，我们来看看这些能做些什么。

二、使用shell脚本自动将项目打包部署到git服务器

1.一个git提交的例子

#!/bin/bash git add . git commit -m xj--$1 git push # 提交时只需要执行 bash git.sh 参数内容即可完成提交操作 

首先，我们在项目根目录下新建一个git.sh文件，输入以上脚本，保存，然后我们后面要提交代码时，只需要执行 bash git.sh 你的注释，就可以将代码提交到服务器上了，是不是简化了我们提交的步骤呢

2.vue项目部署

我在一张图教你快速玩转vue-cli3这篇文章中教大家了如何独立配置项目，文章末尾有写到部署的方式，如下：

#!/usr/bin/env sh # 当发生错误时中止脚本 set -e # 构建 npm run build # cd 到构建输出的目录 cd dist git init git add -A git commit -m deploy git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master cd - 

在学完shell脚本后，是不是觉得豁然开朗了呢。如果有更复杂的需求，我们可以用同样的方式去部署。

三、使用nodeJs编写命令行工具

我们这里使用commander来搭建node命令行，接下来我会给出最基本的用法，下一篇文章将专门来给大家讲解如何搭建一个高可用的node命令行工具，在此之前，大家可以自由摸索，也许会有更好的方式。

// 1.构建项目目录 mkdir xxx cd xxx npm init // 2.安装commander模块 npm install commander --save // 3.新建bin/[你自定义的命令行文件名] #!/usr/bin/env node var program = require(commander); program.version(0.0.1); program     .command(help)     .description(显示使用帮助)     .action(function() {          program.outputHelp();     }); program     .command(create [dir])     .description(创建一个空博客)     .action(function(dir) {          console.log(create %s, dir);     }); program     .command(preview [dir])     .description(实时预览)     .action(function(dir) {          console.log(preview %s, dir);     }); program     .command(build [dir])     .description(生成整站静态HTML)     .option(-o, --output <dir>, 生成的静态HTML存放目录)     .action(function(dir) {          console.log(创建 %s, 输出 %s, dir, options.output);     }); // 开始解析命令 program.parse(process.argv); // 4.在package.json目录下执行关联操作 npm link // 5.测试,输入相关命令即可执行对应操作 xxx help 

 本文转载自微信公众号「趣谈前端 」，可以通过以下二维码关注。转载本文请联系趣谈前端 公众号。

【编辑推荐】

网络卡顿不着急换新机试试这几招调整 消灭密码？定期重置？准备好颠覆认知吧！ 谷歌也看不下去了！安卓内存巨大但为何还杀后台 甚至比Excel还好用？WPS这几项功能真香 微软Windows 11/Windows 10 一个命令安装 Windows Linux 子系统（WSL） 【责任编辑：姜华 TEL：（010）68476606】

很赞哦!（3）