当前位置: 首页 > news >正文

使用Gradle编译前端的项目

使用Gradle编译前端的项目

  • 前言
    • 项目结构
    • 根项目(parent-project)的 settings.gradle.kts
    • 后端项目(backend)的 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

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

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任务,确保先打包Vuefrom("../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.NpmTaskgroup = "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包中。

相关文章:

使用Gradle编译前端的项目

使用Gradle编译前端的项目 前言项目结构根项目&#xff08;parent-project&#xff09;的 settings.gradle.kts后端项目&#xff08;backend&#xff09;的 build.gradle.kts前端项目&#xff08;frontend&#xff09;的 build.gradle.kts打包bootJar 前言 最近的项目都是使用…...

网络爬虫——常见问题与调试技巧

在开发网络爬虫的过程中&#xff0c;开发者常常会遇到各种问题&#xff0c;例如网页加载失败、数据提取错误、反爬机制限制等。以下内容将结合实际经验和技术方案&#xff0c;详细介绍解决常见错误的方法&#xff0c;以及如何高效调试和优化爬虫代码。 1. 爬虫过程中常见的错误…...

【AI绘画】Midjourney进阶:色调详解(下)

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;Midjourney中的色彩控制为什么要控制色彩&#xff1f;为什么要在Midjourney中控制色彩&#xff1f; &#x1f4af;色调纯色调灰色调暗色调 &#x1f4af…...

springboot+redis+lua实现分布式锁

1 分布式锁 Java锁能保证一个JVM进程里多个线程交替使用资源。而分布式锁保证多个JVM进程有序交替使用资源&#xff0c;保证数据的完整性和一致性。 分布式锁要求 互斥。一个资源在某个时刻只能被一个线程访问。避免死锁。避免某个线程异常情况不释放资源&#xff0c;造成死锁…...

【Petri网导论学习笔记】Petri网导论入门学习(十一) —— 3.3 变迁发生序列与Petri网语言

目录 3.3 变迁发生序列与Petri网语言定义 3.4定义 3.5定义 3.6定理 3.5例 3.9定义 3.7例 3.10定理 3.6定理 3.7 有界Petri网泵引理推论 3.5定义 3.9定理 3.8定义 3.10定义 3.11定义 3.12定理 3.93.3 变迁发生序列与Petri网语言 对于 Petri 网进行分析的另一种方法是考察网系统…...

docker-compose文件的简介及使用

Docker Compose是Docker官方的开源项目&#xff0c;主要用于定义和运行多容器Docker应用。以下是对Docker Compose的详细介绍&#xff1a; 一、主要功能&#xff1a; 容器编排&#xff1a;Docker Compose允许用户通过一个单独的docker-compose.yml模板文件&#xff08;YAML格…...

[护网杯 2018]easy_tornado

这里有一个hint点进去看看&#xff0c;他说md5(cookie_secretmd5(filename))&#xff0c;所以我们需要获得cookie_secret的value 根据题目tornado,它可能是tornado的SSTI 这里吧filehash改为NULL. 是tornado的SSTI 输入{{handler.settings}} (settings 属性是一个字典&am…...

基于STM32的智能风扇控制系统

基于STM32的智能风扇控制系统 持续更新&#xff0c;欢迎关注!!! ** 基于STM32的智能风扇控制系统 ** 近几年&#xff0c;我国电风扇市场发展迅速&#xff0c;产品产出持续扩张&#xff0c;国家产业政策鼓励电风扇产业向高技术产品方向发展&#xff0c;国内企业新增投资项目投…...

决策树——基于乳腺癌数据集与cpu数据集实现

决策树——乳腺癌数据实现 4.1 训练决策树模型,并计算测试集的准确率 1. 读入数据 from sklearn import datasets from sklearn.tree import DecisionTreeClassifier from sklearn.model_selection import train_test_split from sklearn.metrics import confusion_matrix …...

探索空间自相关:揭示地理数据中的隐藏模式

目录 一、什么是空间自相关&#xff1f; 类型 二、空间自相关的数学基础 空间加权矩阵 三、度量空间自相关的方法 1. 全局自相关 2. 局部自相关 四、空间自相关的实际应用 五、Python实现空间自相关分析 1. 数据准备 2. 计算莫兰指数 3. 局部自相关&#xff08;LISA 分析&…...

echarts使用示例

柱状图折线图 折柱混合&#xff1a;https://echarts.apache.org/examples/zh/editor.html?cmix-line-bar option {title:{show: true},tooltip: {trigger: axis,axisPointer: {type: cross,crossStyle: {color: #999}}},toolbox: {feature: {dataView: { show: true, readOnl…...

Flink高可用配置(HA)

从Flink架构中我们可以看到,JobManager这个组件非常重要,是中心协调器,负责任务调度和资源管理。默认情况下,每个Flink集群只有一个JobManager实例。这会产生单点故障(SPOF):如果JobManager崩溃,则无法提交新程序,正在运行的程序也会失败。通过JobManager的高可用性,…...

如何编写出色的技术文档

目录 ​编辑 1. 明确文档目的和受众 目的的重要性 了解受众 2. 收集和组织信息 信息收集的技巧 组织信息 3. 规划文档结构 结构规划的重要性 结构规划的步骤 4. 编写内容 语言和风格 内容的组织 编写技巧 5. 审阅和测试 审阅的重要性 测试的必要性 6. 版本控…...

学习日记_20241126_聚类方法(谱聚类Spectral Clustering)

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…...

图书系统小案例

目前就实现了分页查询&#xff0c;修改&#xff0c;删除功能 这个小案例练习到了很多技能&#xff0c;比如前后端交互、异步请求、三层架构思想、后端连接数据库、配置文件、基础业务crud等等 感兴趣的小伙伴可以去做一个试试 准备工作 1、使用maven构建一个web工程 打开i…...

目标检测之学习路线(本科版)

以下是为一名计算机科学与技术本科大四学生整理的“目标检测”学习路线&#xff0c;结合了从基础到高级的内容&#xff0c;适合初学者逐步深入。每个阶段都有明确的学习要求、学习建议和资源推荐。 阶段一&#xff1a;基础知识学习 学习要求&#xff1a; 掌握编程语言 Pytho…...

C#调用C++ DLL方法之C++/CLI(托管C++)

托管C与C/CLI前世今生 C/CLI (C/Common Language Infrastructure) 是一种用于编写托管代码的语言扩展&#xff0c;它是为了与 .NET Framework 进行互操作而设计的。C/CLI 是 C 的一种方言&#xff0c;它引入了一些新的语法和关键字&#xff0c;以便更好地支持 .NET 类型和垃圾…...

免费搭建一个属于自己的个性化博客(Hexo+Fluid+Github)

文章目录 0.简介1. 下载安装fluid主题2. 创建文章3. 添加分类及标签3.1 创建“分类”选项3.2 创建“标签”选项4. 文章中插入图片5. 添加阅读量统计6. 添加评论功能7. 显示文章更新时间8. 为hexo添加latex支持小结参考文献0.简介 通过HEXO模板和Fluid主题搭建自己的博客,预览…...

vue3 开发利器——unplugin-auto-import

这玩意儿是干啥的&#xff1f; 还记得 Vue 3 的组合式 API 语法吗&#xff1f;如果有印象&#xff0c;那你肯定对以下代码有着刻入 DNA 般的熟悉&#xff1a; 刚开始写觉得没什么&#xff0c;但是后来渐渐发现&#xff0c;这玩意儿几乎每个页面都有啊&#xff01; 每次都要写…...

开发需求总结19-vue 根据后端返回一年的数据,过滤出符合条件数据

需求描述&#xff1a; 定义时间分界点&#xff1a;每月26号8点&#xff0c;过了26号8点则过滤出data数组中符合条件数据下个月的数据&#xff0c;否则过滤出当月数据 1.假如现在是2024年11月14日&#xff0c;那么过滤出data数组中日期都是2024-11月的数据&#xff1b; 2.假如…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

GAN模式奔溃的探讨论文综述(一)

简介 简介:今天带来一篇关于GAN的,对于模式奔溃的一个探讨的一个问题,帮助大家更好的解决训练中遇到的一个难题。 论文题目:An in-depth review and analysis of mode collapse in GAN 期刊:Machine Learning 链接:...

用鸿蒙HarmonyOS5实现国际象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的国际象棋小游戏的完整实现代码&#xff0c;使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├── …...