Bootstrap

使用Gradle编译前端的项目

前言

最近的项目都是使用Gradle来开发和编译的。 由于个人项目前后端都有用到,我想放在一个项目中,于是有了这篇文章。
我前端使用的Vue,后端使用kotlin , 框架使用的SpringBoot。

项目结构

项目分两个子项目, 前端和后端。 项目结构大概如下:

parent-project
├── backend (Spring Boot 后端项目根目录)
│   ├── build.gradle.kts
│   ├── src
│   │   └── main
│   │       ├── java (Java 源代码目录)
│   │       └── resources (资源文件目录,包含配置文件等)
│   └── settings.gradle.kts
└── frontend (前端项目根目录,这里假设是 Vue 项目)
    ├── build.gradle.kts
    └── src
        ├── assets
        ├── components
        └── main.js

根项目(parent-project)的 settings.gradle.kts

这个文件用于声明多项目构建中的子项目,内容如下:

rootProject.name = "parent-project"
include("backend", "frontend")

上述代码定义了根项目的名称为 parent-project,并将 backend 和 frontend 作为子项目包含进来。

后端项目(backend)的 build.gradle.kts

正常的进行kts的脚本配置,但是需要新增配置两个Task, 来处理前端的逻辑,

val copyVueDist by tasks.registering(Copy::class) {
    dependsOn(":web:buildVue") // 同时依赖Vue模块的buildVue任务,确保先打包Vue
    from("../web/dist")        // 源目录,即Vue项目打包后的dist目录,注意相对路径
    into("build/resources/main/static")     //bootJar包的静态资源目录,会把前端的打包内容复制过来
}

tasks.getByName("processResources") {    //bootJar打包过程中处理静态资源的task,  
    dependsOn(copyVueDist)              //需要依赖上面的复制task
}

前端项目(frontend)的 build.gradle.kts

前端项目的kts配置

import com.github.gradle.node.npm.task.NpmTask

group = "com.github.blanexie.magic.web"
version = "0.0.1"

plugins {
    id("com.github.node-gradle.node") version "7.0.2"    //使用这个插件可以进行npm的调用
}

val buildTask = tasks.register<NpmTask>("buildVue") {  //定义一个buildVue的任务,用来打包前端项目
    args.set(listOf("run", "build-only" ))          //前端的打包命令
    dependsOn(tasks.npmInstall)                     //需要先执行依赖安装命令
}

打包bootJar

只要执行backend项目的build 或者bootJar任务即可, 他会按照顺序先执行前端的编译打包命令, 然后复制到最终的jar包中。

;