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本書籍