vue-react 項目自動化部署方案
本文主要介紹 shell 腳本的一些基本用法以及在前端項目中的應用。將圍繞以下幾點來展開:
-
shell 基本用法(變量,循環,傳參,運算符,流程控制等)
-
使用 shell 腳本自動將項目打包部署到 git 服務器
-
使用 nodeJs 編寫命令行工具
1. shell 基本介紹及用法
Shell 是一個用 C 語言編寫的程序,它是用戶使用 Linux 的橋樑,業界所說的 shell 通常都是指 shell 腳本,Shell 編程跟 java、php 編程一樣,只要有一個能編寫代碼的文本編輯器和一個能解釋執行的腳本解釋器就可以了。Linux 的 Shell 種類衆多,在這裏我們介紹一種常用且開源免費的 shell——bash。
-
Shell 變量
變量聲明如下:
time=10
注:變量名和等號之間不能有空格,變量名命名規則如下:
-
命名只能使用英文字母,數字和下劃線,首個字符不能以數字開頭。
-
中間不能有空格,可以使用下劃線(_)。
-
不能使用標點符號。
-
不能使用 bash 裏的關鍵字(可用 help 命令查看保留關鍵字)
我們可以通過如下方式使用變量:
echo $name
# 或者這樣
echo ${name}
我們能使用如下方式刪除變量:
unset name
關於 shell 變量的更多用法,可以參考 linux 官網,這裏就不過多介紹了。
- Shell 傳遞參數
我們可以在執行 Shell 腳本時,向腳本傳遞參數,腳本內獲取參數的格式爲:。代表一個數字,爲執行腳本的第一個參數,爲執行腳本的第二個參數,以此類推其中 n。n 代表一個數字,1 爲執行腳本的第一個參數,2 爲執行腳本的第二個參數,以此類推, 其中 0 爲執行的文件名
使用如下:
echo "文件名:$0";
echo "參數一:$1";
echo "參數二:$2";
echo "參數三:$3";
# 輸出
文件名:./test.sh
參數一:1
參數二:2
參數三:3
- Shell 數組
Bash Shell 只支持一維數組,數組元素的下標由 0 開始。Shell 數組用括號來表示,元素用 "空格" 符號分割開,例如:
names=(name1 ... namen)
我們可以通過如下方式讀取數組:
${names[0]}
我們可以使用 @ 或 * 可以獲取數組中的所有元素,例如:
echo "數組的元素爲: ${nsmes[*]}"
# 輸出爲
數組的元素爲: A B C D
- Shell 基本運算符
Shell 支持多種運算符,如下:
-
算數運算符
-
關係運算符
-
布爾運算符
-
字符串運算符
-
文件測試運算符
原生 bash 不支持簡單的數學運算,但是可以通過其他命令來實現,這裏我們使用 expr。它是一款表達式計算工具,使用它能完成表達式的求值操作。例如:
#!/bin/bash
total=`expr 2 + 2`
echo "兩數之和爲 : $total"
注:這裏我們使用反引號 ``。由於命令行工具這塊用的比較少,如果感興趣,大家可以去官網瞭解學習。
- 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。
- 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
- 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 服務器
- 一個 git 提交的例子
#!/bin/bash
git add .
git commit -m 'xj--'$1
git push
# 提交時只需要執行 bash git.sh '參數內容'即可完成提交操作
首先,我們在項目根目錄下新建一個 git.sh 文件,輸入以上腳本,保存,然後我們後面要提交代碼時,只需要執行 bash git.sh '你的註釋',就可以將代碼提交到服務器上了,是不是簡化了我們提交的步驟呢
- 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
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/g5waFBvlSZo8QRVs4xrIiQ