[[415229]]

本文主要介紹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 

 本文轉載自微信公眾號「趣談前端 」，可以通過以下二維碼關注。轉載本文請聯系趣談前端 公眾號。

【編輯推薦】