Vue/React項(xiàng)目中不可忽視的自動(dòng)化部署方案
本文主要介紹shell腳本的一些基本用法以及在前端項(xiàng)目中的應(yīng)用。將圍繞以下幾點(diǎn)來(lái)展開(kāi)：
- shell基本用法(變量，循環(huán)，傳參，運(yùn)算符，流程控制等)
- 使用shell腳本自動(dòng)將項(xiàng)目打包部署到git服務(wù)器
- 使用nodeJs編寫命令行工具
一、shell基本介紹及用法
- Shell 是一個(gè)用 C 語(yǔ)言編寫的程序，它是用戶使用 Linux 的橋梁，業(yè)界所說(shuō)的 shell 通常都是指 shell 腳本，Shell 編程跟 java、php 編程一樣，只要有一個(gè)能編寫代碼的文本編輯器和一個(gè)能解釋執(zhí)行的腳本解釋器就可以了。Linux 的 Shell 種類眾多，在這里我們介紹一種常用且開(kāi)源免費(fèi)的shell——bash。
1.Shell 變量
變量聲明如下：
- time=10
注：變量名和等號(hào)之間不能有空格，變量名命名規(guī)則如下：
- 命名只能使用英文字母，數(shù)字和下劃線，首個(gè)字符不能以數(shù)字開(kāi)頭。
- 中間不能有空格，可以使用下劃線(_)。
- 不能使用標(biāo)點(diǎn)符號(hào)。
- 不能使用bash里的關(guān)鍵字(可用help命令查看保留關(guān)鍵字)
我們可以通過(guò)如下方式使用變量：
- name="xujiang"
- echo $name
- # 或者這樣
- echo ${name}
我們能使用如下方式刪除變量：
- unset name
關(guān)于shell變量的更多用法，可以參考linux官網(wǎng)，這里就不過(guò)多介紹了。
2.Shell 傳遞參數(shù)
- 我們可以在執(zhí)行 Shell 腳本時(shí)，向腳本傳遞參數(shù)，腳本內(nèi)獲取參數(shù)的格式為：。代表一個(gè)數(shù)字，為執(zhí)行腳本的第一個(gè)參數(shù)，為執(zhí)行腳本的第二個(gè)參數(shù)，以此類推其中
n。n代表一個(gè)數(shù)字，1為執(zhí)行腳本的第一個(gè)參數(shù)，2為執(zhí)行腳本的第二個(gè)參數(shù)，以此類推,其中0 為執(zhí)行的文件名
使用如下：
- echo "文件名：$0";
- echo "參數(shù)一：$1";
- echo "參數(shù)二：$2";
- echo "參數(shù)三：$3";
- # 輸出
- 文件名：./test.sh
- 參數(shù)一：1
- 參數(shù)二：2
- 參數(shù)三：3
3.Shell 數(shù)組
Bash Shell 只支持一維數(shù)組，數(shù)組元素的下標(biāo)由0開(kāi)始。Shell 數(shù)組用括號(hào)來(lái)表示，元素用"空格"符號(hào)分割開(kāi)，例如：
- names=(name1 ... namen)
我們可以通過(guò)如下方式讀取數(shù)組：
- ${names[0]}
我們可以使用@ 或 * 可以獲取數(shù)組中的所有元素，例如：
- echo "數(shù)組的元素為: ${nsmes[*]}"
- # 輸出為
- 數(shù)組的元素為: A B C D
4.Shell 基本運(yùn)算符
Shell支持多種運(yùn)算符，如下：
- 算數(shù)運(yùn)算符
- 關(guān)系運(yùn)算符
- 布爾運(yùn)算符
- 字符串運(yùn)算符
- 文件測(cè)試運(yùn)算符
原生bash不支持簡(jiǎn)單的數(shù)學(xué)運(yùn)算，但是可以通過(guò)其他命令來(lái)實(shí)現(xiàn)，這里我們使用expr。它是一款表達(dá)式計(jì)算工具，使用它能完成表達(dá)式的求值操作。例如：
- #!/bin/bash
- total=`expr 2 + 2`
- echo "兩數(shù)之和為 : $total"
注：這里我們使用反引號(hào)``。由于命令行工具這塊用的比較少，如果感興趣，大家可以去官網(wǎng)了解學(xué)習(xí)。
5.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。
6.Shell test 命令
test 命令用于檢查某個(gè)條件是否成立，它可以進(jìn)行數(shù)值、字符和文件三個(gè)方面的測(cè)試。
數(shù)值測(cè)試：
- -eq 等于則為真
- -ne 不等于則為真
- -gt 大于則為真
- -ge 大于等于則為真
- -lt 小于則為真
- -le 小于等于則為真
使用方式如下：
- name1=1
- name2=1
- if test $[name1] -eq $[name2]
- then
- echo '相等！'
- else
- echo '不相等！'
- fi
運(yùn)行腳本后將輸出'相等!'。
字符串測(cè)試：
- = 等于則為真
- != 不相等則為真
- -z 字符串 字符串的長(zhǎng)度為零則為真
- -n 字符串 字符串的長(zhǎng)度不為零則為真
例如：
- name1="xu"
- name2="xu"
- if test $name1 = $name2
- then
- echo '兩個(gè)字符串相等!'
- else
- echo '兩個(gè)字符串不相等!'
- fi
7.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 "無(wú)"
- fi
- for 循環(huán)
- # 一般格式
- for var in a1 a2 ... aN
- do
- 命令1
- 命令2
- ...
- 命令N
- done
在了解完如上知識(shí)點(diǎn)后，我們來(lái)看看這些能做些什么。
二、使用shell腳本自動(dòng)將項(xiàng)目打包部署到git服務(wù)器
1.一個(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ù)器上了，是不是簡(jiǎn)化了我們提交的步驟呢
2.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 git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master
- cd -
在學(xué)完shell腳本后，是不是覺(jué)得豁然開(kāi)朗了呢。如果有更復(fù)雜的需求，我們可以用同樣的方式去部署。
三、使用nodeJs編寫命令行工具
我們這里使用commander來(lái)搭建node命令行，接下來(lái)我會(huì)給出最基本的用法，下一篇文章將專門來(lái)給大家講解如何搭建一個(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);
- });
- // 開(kāi)始解析命令
- program.parse(process.argv);
- // 4.在package.json目錄下執(zhí)行關(guān)聯(lián)操作
- npm link
- // 5.測(cè)試,輸入相關(guān)命令即可執(zhí)行對(duì)應(yīng)操作
- xxx help
本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端 」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系趣談前端 公眾號(hào)。
【編輯推薦】
