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 脚本所在的绝对路径

1
2
3
dirname file # 获取 file 文件的相对路径
echo $0 # 获取当前执行的脚本文件名
pwd # 显示当前工作目录

由以上命令可总结出,获取当前 Shell 脚本所在的绝对路径的命令如下:

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

3.2 Web 静态文件

Gradle / Spring 工程中,./src/main/resources/static 目录下可存放静态文件,在服务端程序运行时,即可获取此目录下的静态文件,所以需要将通过 Webpack 编译、构建生成的静态文件存放在该目录下。

1
cp -r ./dist/* $SERVER_PATH/src/main/resources/static  # 将静态文件复制到指定位置

3.3 获取 Gradle 构建生成的目标 Jar 文件的文件名

运行 gradle build 后,即可在 $PROJECT/build/libs 中生成目标 Jar 文件,获取该文件的文件名,以备之后生成 Jar 运行脚本所用:

1
NAME=`ls $PROJECT/build/libs`  # 获取当前目录下唯一的文件的文件名

3.4 获取该脚本执行时的时间

各工程模块均编译、构建完毕后,需要统一存放在同一个目录中,各个时期生成的目录以时间命名进行区分。

1
BUILD_TIME=`date "+%Y-%m-%d_%H-%M"`  # 获取脚本执行时的时间

4. 该项目的一键构建、打包 Shell 脚本

4.1 脚本具体执行流程

  1. 清理各个工程的历史构建缓存
  2. 编译 Web 工程生成静态文件,移入后端工程相应目录。
  3. 编译公共依赖 Jar 包,移入后端工程、客户端工程相应目录。
  4. 编译后端工程、客户端工程。
  5. 后端工程、客户端工程编译后生成的 Jar 文件移入打包目录中,该目录以脚本运行时的时间作为区分。

该脚本的具体执行流程如下图所示,具体步骤如下:

4.2 一键构建、打包脚本

本文已经将脚本的重点、流程等内容进行了详细的介绍,现在贴出脚本具体内容,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#!/bin/bash
# 集群设备管理系统工程的 web 端、模拟客户端、服务器端等的整体清理、构建、打包、发布

PROJECT_PATH=/mnt/d/project/github/ClusterDevicePlatform; # 工程所在目录
WEB_PATH=/mnt/c/developer/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 仓库