使用Gradle编译前端的项目

使用Gradle编译前端的项目

  • 前言
    • 项目结构
    • [根项目(parent-project)的 settings.gradle.kts](#根项目(parent-project)的 settings.gradle.kts)
    • [后端项目(backend)的 build.gradle.kts](#后端项目(backend)的 build.gradle.kts)
    • [前端项目(frontend)的 build.gradle.kts](#前端项目(frontend)的 build.gradle.kts)
    • 打包bootJar

前言

最近的项目都是使用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

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

kotlin 复制代码
rootProject.name = "parent-project"
include("backend", "frontend")

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

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

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

kotlin 复制代码
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配置

kotlin 复制代码
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包中。

相关推荐
JosieBook1 小时前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛2 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端2 小时前
claude code 原理分析
前端
GalaxyMeteor2 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man2 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮2 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua3 小时前
setup函数相关【3】
前端·javascript·vue.js