vue/react項(xiàng)目中不可忽視的自動(dòng)化部署方案
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
本文主要介紹shell腳本的一些基本用法以及在前端項(xiàng)目中的應(yīng)用。將圍繞以下幾點(diǎn)來展開：
shell基本用法（變量，循環(huán)，傳參，運(yùn)算符，流程控制等） 使用shell腳本自動(dòng)將項(xiàng)目打包部署到git服務(wù)器 使用nodeJs編寫命令行工具
1. shell基本介紹及用法
Shell 是一個(gè)用 C 語言編寫的程序，它是用戶使用 Linux 的橋梁，業(yè)界所說的 shell 通常都是指 shell 腳本，Shell 編程跟 java、php 編程一樣，只要有一個(gè)能編寫代碼的文本編輯器和一個(gè)能解釋執(zhí)行的腳本解釋器就可以了。Linux 的 Shell 種類眾多，在這里我們介紹一種常用且開源免費(fèi)的shell——bash。
Shell 變量
變量聲明如下：
time=10
注：變量名和等號(hào)之間不能有空格，變量名命名規(guī)則如下：
命名只能使用英文字母，數(shù)字和下劃線，首個(gè)字符不能以數(shù)字開頭。 中間不能有空格，可以使用下劃線（_）。 不能使用標(biāo)點(diǎn)符號(hào)。 不能使用bash里的關(guān)鍵字（可用help命令查看保留關(guān)鍵字）
我們可以通過如下方式使用變量：
name="xujiang"
echo $name
# 或者這樣
echo ${name}
我們能使用如下方式刪除變量：
unset name
關(guān)于shell變量的更多用法，可以參考linux官網(wǎng)，這里就不過多介紹了。
Shell 傳遞參數(shù)
我們可以在執(zhí)行 Shell 腳本時(shí)，向腳本傳遞參數(shù)，腳本內(nèi)獲取參數(shù)的格式為：
0 為執(zhí)行的文件名
使用如下：
echo "文件名：$0";
echo "參數(shù)一：$1";
echo "參數(shù)二：$2";
echo "參數(shù)三：$3";
# 輸出
文件名：./test.sh
參數(shù)一：1
參數(shù)二：2
參數(shù)三：3
Shell 數(shù)組
Bash Shell 只支持一維數(shù)組，數(shù)組元素的下標(biāo)由0開始。Shell 數(shù)組用括號(hào)來表示，元素用"空格"符號(hào)分割開，例如：
names=(name1 ... namen)
我們可以通過如下方式讀取數(shù)組：
${names[0]}
我們可以使用@ 或 * 可以獲取數(shù)組中的所有元素，例如：
echo "數(shù)組的元素為: ${nsmes[*]}"
# 輸出為
數(shù)組的元素為: A B C D
Shell 基本運(yùn)算符
Shell支持多種運(yùn)算符，如下：
算數(shù)運(yùn)算符 關(guān)系運(yùn)算符 布爾運(yùn)算符 字符串運(yùn)算符 文件測試運(yùn)算符
原生bash不支持簡單的數(shù)學(xué)運(yùn)算，但是可以通過其他命令來實(shí)現(xiàn)，這里我們使用expr。它是一款表達(dá)式計(jì)算工具，使用它能完成表達(dá)式的求值操作。例如：
#!/bin/bash
total=`expr 2 + 2`
echo "兩數(shù)之和為 : $total"
注：這里我們使用反引號(hào)``。由于命令行工具這塊用的比較少，如果感興趣，大家可以去官網(wǎng)了解學(xué)習(xí)。
Shell echo命令
Shell 的 echo 指令與 PHP 的 echo 指令類似，都是用于字符串的輸出，這里我們著重介紹與用戶交互的輸入輸出。
#!/bin/sh
read name
echo "hello $name"
read 命令從標(biāo)準(zhǔn)輸入中讀取一行,并把輸入行的每個(gè)字段的值指定給 shell 變量。當(dāng)我們執(zhí)行腳本后，輸入一個(gè)自定義名稱，按下回車將輸出 'hello xxx',我們是不是想到了vue腳手架中的一些命令呢，是的，我們可以用這個(gè)方法去實(shí)現(xiàn)自己的腳手架配置或者自動(dòng)生成項(xiàng)目模版。
我們也可以用echo將顯示結(jié)果定向至文件：
echo "It is mine" > test.js
執(zhí)行 這個(gè)文件后將為我們創(chuàng)建一個(gè)test.js文件，并將輸出內(nèi)容寫入test.js。
Shell test 命令
test 命令用于檢查某個(gè)條件是否成立，它可以進(jìn)行數(shù)值、字符和文件三個(gè)方面的測試。
數(shù)值測試：
-eq 等于則為真 -ne 不等于則為真 -gt 大于則為真 -ge 大于等于則為真 -lt 小于則為真 -le 小于等于則為真
使用方式如下：
name1=1
name2=1
if test $[name1] -eq $[name2]
then
echo '相等！'
else
echo '不相等！'
fi
運(yùn)行腳本后將輸出'相等!'。
字符串測試：
= 等于則為真 != 不相等則為真 -z 字符串 字符串的長度為零則為真 -n 字符串 字符串的長度不為零則為真
例如：
name1="xu"
name2="xu"
if test $name1 = $name2
then
echo '兩個(gè)字符串相等!'
else
echo '兩個(gè)字符串不相等!'
fi
Shell 流程控制
流程控制我們主要介紹if else， if else-if else和for循環(huán)。
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 循環(huán)
# 一般格式
for var in a1 a2 ... aN
do
命令1
命令2
...
命令N
done
在了解完如上知識(shí)點(diǎn)后，我們來看看這些能做些什么。
2. 使用shell腳本自動(dòng)將項(xiàng)目打包部署到git服務(wù)器
一個(gè)git提交的例子
#!/bin/bash
git add .
git commit -m 'xj--'$1
git push
# 提交時(shí)只需要執(zhí)行 bash git.sh '參數(shù)內(nèi)容'即可完成提交操作
首先，我們?cè)陧?xiàng)目根目錄下新建一個(gè)git.sh文件，輸入以上腳本，保存，然后我們后面要提交代碼時(shí)，只需要執(zhí)行 bash git.sh '你的注釋'，就可以將代碼提交到服務(wù)器上了，是不是簡化了我們提交的步驟呢
vue項(xiàng)目部署
我在一張圖教你快速玩轉(zhuǎn)vue-cli3這篇文章中教大家了如何獨(dú)立配置項(xiàng)目，文章末尾有寫到部署的方式，如下：
#!/usr/bin/env sh
# 當(dāng)發(fā)生錯(cuò)誤時(shí)中止腳本
set -e
# 構(gòu)建
npm run build
# cd 到構(gòu)建輸出的目錄
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f [email protected]:<USERNAME>/<USERNAME>.bitbucket.io.git master
cd -
在學(xué)完shell腳本后，是不是覺得豁然開朗了呢。如果有更復(fù)雜的需求，我們可以用同樣的方式去部署。
3.使用nodeJs編寫命令行工具
我們這里使用commander來搭建node命令行，接下來我會(huì)給出最基本的用法，下一篇文章將專門來給大家講解如何搭建一個(gè)高可用的node命令行工具，在此之前，大家可以自由摸索，也許會(huì)有更好的方式。
// 1.構(gòu)建項(xiàng)目目錄
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('創(chuàng)建一個(gè)空博客')
.action(function(dir) {
console.log('create %s', dir);
});
program
.command('preview [dir]')
.description('實(shí)時(shí)預(yù)覽')
.action(function(dir) {
console.log('preview %s', dir);
});
program
.command('build [dir]')
.description('生成整站靜態(tài)HTML')
.option('-o, --output <dir>', '生成的靜態(tài)HTML存放目錄')
.action(function(dir) {
console.log('創(chuàng)建 %s, 輸出 %s', dir, options.output);
});
// 開始解析命令
program.parse(process.argv);
// 4.在package.json目錄下執(zhí)行關(guān)聯(lián)操作
npm link
// 5.測試,輸入相關(guān)命令即可執(zhí)行對(duì)應(yīng)操作
xxx help
“分享、點(diǎn)贊、在看” 支持一波 