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

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

1. shell基本用法（变量，循环，传参，运算符，流程控制等）
2. 使用shell脚本自动将项目打包部署到git服务器
3. 使用nodeJs编写命令行工具

1. 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
复制代码

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

2. 使用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脚本后，是否是以为豁然开朗了呢。若是有更复杂的需求，咱们能够用一样的方式去部署。

3.使用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
复制代码

接下来将推出《如何搭建一个高可用的node命令行工具》，欢迎关注。若有更好的shell用途，欢迎在评论区互动，期待+1

最后

欢迎关注下方公众号，让咱们一块儿探讨前端的边界：

在公众号点击进群，能够加入vue学习小组，一块儿学习前端技术；

回复学习路径，将获取笔者多年从业经验的前端学习路径的思惟导图；

更多推荐

• 让你瞬间提升工做效率的经常使用js函数汇总(持续更新)
• 一张图教你快速玩转vue-cli3
• 3分钟教你用原生js实现具备进度监听的文件上传预览组件
• 3分钟教你用原生js实现具备进度监听的文件上传预览组件
• 使用Angular8和百度地图api开发《旅游清单》
• js基本搜索算法实现与170万条数据下的性能测试
• 《前端算法系列》如何让前端代码速度提升60倍
• 《前端算法系列》数组去重
• vue高级进阶系列——用typescript玩转vue和vuex
• 前端三年，谈谈最值得读的5本书籍