Windows 10 用於 Linux 子系統的一鍵構建、打包腳本「 Node、Gradle 項目」

最近正在開發一個 Java & Vue.js 全棧項目，該項目由如下幾部分組成：Java 後端服務器、基於 Vue.js 的單頁應用、基於 JavaFX 的 GUI 客戶端以及其餘輔助工具等。

其中 Java 服務端及客戶端均依賴公共的 Jar 包，基於 Vue.js 構建生成的靜態文件亦須轉移至後端模塊的相關目錄中，由後端模塊附帶的 Web 服務器管理。若是對項目中的某個子模塊進行修改，須要對其手動編譯、移動，再對父模塊進行編譯，操做繁瑣，本文探討經過 Windows 10 的 Linux 子系統運行 Shell 腳本簡化上述操做並進行擴展。

以前的一篇文章已探討過 Linux 子系統的使用及在該系統下，Java、Node.js、Gradle 等工具的配置，本文再也不贅述。本文開篇首先優化 Linux 子系統「Windows Subsystem for Linux (WSL) 」的使用體驗，

1. 使用 wsl-terminal 加強 WSL 的使用體驗

wsl-terminal 是專門爲 WSL 準備的終端模擬器，主體是 mintty，另外整合了一些至關友好的特性，使用起來很是方便，也是目前用戶體驗最好的，推薦使用。

感受自從用上了 wsl-terminal，徹底同時得到了 Windows 10 優異的界面效果和娛樂性，以及 Linux 的專業性和效率，而且二者可以完美融合在一塊兒，徹底能夠取得好於 macOS 的使用體驗「此處爲 YY，我未深度使用過 macOS，坐等打臉」。

wsl-terminal 主要具備以下特性：

• 優秀的兼容性（中文顯示/輸入、 24 位顏色、命令輸出等都正常了）。
• 體積小巧，壓縮包僅 1.7 M 多，解壓後不到 10 M 。
• 配置簡單， mintty 能夠直接在標題欄右鍵配置， wsl-terminal 的配置文件也很簡單。
• 能夠直接在資源管理器右鍵打開終端模擬器並定位到當前目錄。
• 能夠將 .sh/.py/.pl 腳本關聯到用 wsl-terminal 運行。
• 能夠將文本文件關聯到用 wsl-terminal 裏的 vim 運行。
• 支持 tmux ，能夠在 tmux 裏打開新目錄，恢復已有的 tmux 會話等。
• 支持在 WSL 裏直接運行 Windows 程序。

注： 本小節摘抄了 這篇博客 的部份內容。

2. 全棧項目的總體架構

項目的總體架構以下圖所示：

3. 特定腳本指令及其含義

3.1 獲取當前 Shell 腳本所在的絕對路徑

dirname file # 獲取 file 文件的相對路徑
echo $0      # 獲取當前執行的腳本文件名
pwd          # 顯示當前工做目錄

由以上命令可總結出，獲取當前 Shell 腳本所在的絕對路徑的命令以下：

SH_PATH=$(cd `dirname $0`; pwd)

3.2 Web 靜態文件

Gradle / Spring 工程中，./src/main/resources/static 目錄下可存放靜態文件，在服務端程序運行時，便可獲取此目錄下的靜態文件，因此須要將經過 Webpack 編譯、構建生成的靜態文件存放在該目錄下。

cp -r ./dist/* $SERVER_PATH/src/main/resources/static  # 將靜態文件複製到指定位置

3.3 獲取 Gradle 構建生成的目標 Jar 文件的文件名

運行 gradle build 後，便可在 $PROJECT/build/libs 中生成目標 Jar 文件，獲取該文件的文件名，以備以後生成 Jar 運行腳本所用：

NAME=`ls $PROJECT/build/libs`  # 獲取當前目錄下惟一的文件的文件名

3.4 獲取該腳本執行時的時間

各工程模塊均編譯、構建完畢後，須要統一存放在同一個目錄中，各個時期生成的目錄以時間命名進行區分。

BUILD_TIME=`date "+%Y-%m-%d_%H-%M"`  # 獲取腳本執行時的時間

4. 該項目的一鍵構建、打包 Shell 腳本

4.1 腳本具體執行流程

1. 清理各個工程的歷史構建緩存
2. 編譯 Web 工程生成靜態文件，移入後端工程相應目錄。
3. 編譯公共依賴 Jar 包，移入後端工程、客戶端工程相應目錄。
4. 編譯後端工程、客戶端工程。
5. 後端工程、客戶端工程編譯後生成的 Jar 文件移入打包目錄中，該目錄以腳本運行時的時間做爲區分。

該腳本的具體執行流程以下圖所示，具體步驟以下：

4.2 一鍵構建、打包腳本

本文已經將腳本的重點、流程等內容進行了詳細的介紹，如今貼出腳本具體內容，以下所示：

#!/bin/bash
# 集羣設備管理系統工程的 web 端、模擬客戶端、服務器端等的總體清理、構建、打包、發佈

PROJECT_PATH=/mnt/d/project/ClusterDevicePlatform;       # 主工程所在目錄
WEB_PATH=/mnt/d/project/cluster-device-platform-web;     # Web 模塊所在目錄
SH_PATH=$(cd `dirname $0`; pwd)                          # 腳本所在目錄
BUILD_TIME=`date "+%Y-%m-%d_%H-%M"`                      # 腳本運行時間
UTIL_JAR_PATH=$PROJECT_PATH/messageUtils;                # 公共 Jar 模塊所在目錄
SERVER_PATH=$PROJECT_PATH/ClusterDevicePlatform-server;  # 服務器模塊所在目錄
CLIENT_PATH=$PROJECT_PATH/ClusterDevicePlatform-client;  # 硬件模擬客戶端模塊所在目錄

# 項目已編譯歷史文件的清理
cd $UTIL_JAR_PATH;
rm -rf ./build;
cd $CLIENT_PATH;
rm -rf ./build;
cd $SERVER_PATH;
rm -rf ./build;
rm -rf ./src/main/resources/static;
cd $WEB_PATH;
rm -rf ./dist;

# Web 編譯並將靜態頁面文件移入服務器項目中
npm run build
if [ ! $? -eq 0 ]
then echo "Web 編譯出錯"
    exit 1
fi
echo Web 編譯完畢
mkdir $SERVER_PATH/src/main/resources/static
cp -r ./dist/* $SERVER_PATH/src/main/resources/static

# Client、Server 的編譯
cd $UTIL_JAR_PATH;
gradle build

cd $CLIENT_PATH;
gradle build

cd $SERVER_PATH;
gradle build

# 組織並集中編譯生成的待發布文件
mkdir -p $PROJECT_PATH/publish/release/serverRelease_$BUILD_TIME
cd $PROJECT_PATH/publish/release/serverRelease_$BUILD_TIME
cp $CLIENT_PATH/build/libs/* .
cp $SERVER_PATH/build/libs/* .
cp $SH_PATH/template/* .

# 組裝 Client、Server 的運行腳本
CLIENT_NAME=`ls $CLIENT_PATH/build/libs`
SERVER_NAME=`ls $SERVER_PATH/build/libs`

echo chcp 65001 >> run-client.ps1
echo java -jar -\'Dfile.encoding\'=UTF-8 .\\$CLIENT_NAME cdg-pc 100 >> run-client.ps1
echo '$x = $host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")' >> run-client.ps1

echo chcp 65001 >> run-server.ps1
echo java -jar -\'Dfile.encoding\'=UTF-8 .\\$SERVER_NAME >> run-server.ps1
echo '$x = $host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")' >> run-server.ps1

參考連接

1. Shell 獲取當前工做目錄絕對路徑
2. 淘寶 NPM 鏡像
3. 進入 WSL 環境的多種方法比較 
4. 更好地使用 WSL 終端環境
5. wsl-terminal 官方 GitHub 倉庫