spring boot 对多模块多网站项目利用webjars共用网站js/css等静态资源文件

最新推荐文章于 2024-03-18 09:58:50 发布

码农下的天桥

最新推荐文章于 2024-03-18 09:58:50 发布

阅读量4.3k

点赞数

分类专栏： gradle

本文链接：https://blog.csdn.net/cdnight/article/details/88388847

版权

gradle 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前言

对于开发多个网站而言，每次都要手动将js/css/images复制过去是很烦的事情，尤其是js等修改以后要人工逐个更新那就更麻烦了。
下面就是解决这个问题的方案，请先参考：
打包WebJar实现对静态资源文件的统一依赖管理

下面是摘抄：

96  年少懵懂丶流年梦 
 0.1 2018.08.15 09:29 字数 499 阅读 466评论 0喜欢 1
WebJars的发布以及使用
http://www.webjars.org/ 查看详细的使用说明

WebJars是打包到JAR（Java Archive）文件中的客户端Web库（例如jQuery和Bootstrap）。

在基于JVM的Web应用程序中显式轻松地管理客户端依赖项
使用基于JVM的构建工具（例如Maven，Gradle，sbt，...）来下载客户端依赖项
传递依赖关系会自动解析，并可选择通过RequireJS加载
Web前端使用了越来越多的JS或CSS，如jQuery，Backbone.js和Bootstrap。一般情况下，我们是将这些Web资源拷贝到Java Web项目的webapp相应目录下进行管理。这种通过人工方式管理可能会产生版本误差，拷贝版本错误，漏拷等现象，导致前端页面无法正确展示，版本不一致，文件混乱等，导致出现一些莫名其妙的错误等。

WebJars是将web前端资源（js，css等）打成jar包文件，然后借助Maven工具，以jar包形式对web前端资源进行统一依赖管理，保证这些Web资源版本唯一性。WebJars的jar包部署在Maven中央仓库上。

webjar的使用
类似的使用方式：

<dependencies>
    <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>2.2.4</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.6</version>
        </dependency>
</dependencies>
SpringMVC配置引用
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
在Servlet3中可简化为：

<mvc:resources mapping="/webjars/**" location="/webjars/"/>
Java配置

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
  }

}
在Servlet 3容器中，registry.addResourceHandler行可以简化为：

registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/");
使依赖版本不可知
使用Spring Framework 4.2或更高版本时，它将自动检测webjars-locator类路径上的库，并使用它自动为您解析任何WebJar资产的版本。要启用此功能，您需要将webjars-locator库添加为应用程序在pom.xml文件中的依赖项，如：

<dependencies>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator</artifactId>
        <version>0.30</version>
    </dependency>
</dependencies>
<link rel='stylesheet' href='/webjars/bootstrap/css/bootstrap.min.css'>
打包webjar
新建maven项目，在pom.xml中

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.sonatype.oss</groupId>
        <artifactId>oss-parent</artifactId>
        <version>7</version>
    </parent>

    <packaging>jar</packaging>
    <groupId>org.webjars</groupId>
    <artifactId>test</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <name>Test</name>
    <description>WebJar for Test</description>
    <url>http://webjars.org</url>

    <developers>
        <developer>
            <id>jamesward</id>
            <name>James Ward</name>
            <email>james@jamesward.com</email>
        </developer>
    </developers>

    <licenses>
        <license>
            <name>Apache 2.0</name>
            <url>https://github.com/facebook/react/blob/master/LICENSE</url>
            <distribution>repo</distribution>
        </license>
    </licenses>

    <scm>
        <url>http://github.com/webjars/react</url>
        <connection>scm:git:https://github.com/webjars/react.git</connection>
        <developerConnection>scm:git:https://github.com/webjars/react.git</developerConnection>
        <tag>HEAD</tag>
    </scm>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <!--输出路径-->
        <destinationDir>${project.build.outputDirectory}/META-INF/resources/webjars/${project.artifactId}/${project.version}</destinationDir>
        <requirejs>
            {
                "paths": {
                    "test": "test"
                }
            }
        </requirejs>
    </properties>

    <build>
        <plugins>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-release-plugin</artifactId>
                <version>2.5.3</version>
            </plugin>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-deploy-plugin</artifactId>
                <executions>
                    <execution>
                        <phase>deploy</phase>
                        <goals>
                            <goal>deploy-file</goal>
                        </goals>
                        <configuration>
                            <packaging>jar</packaging>
                            <generatePom>true</generatePom>
                            <url>${project.distributionManagement.repository.url}</url>
                            <artifactId>${project.artifactId}</artifactId>
                            <groupId>${project.groupId}</groupId>
                            <version>${project.version}</version>
                            <file>${project.build.directory}/${project.artifactId}-${project.version}.jar</file>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>

        <!-- 定义打包的资源 src/main/resources 目录下的所有 -->
        <resources>
            <resource>
                <directory>${project.basedir}/src/main/resources</directory>
                <targetPath>${destinationDir}</targetPath>
                <filtering>true</filtering>
            </resource>
        </resources>
    </build>

    <!-- 本地的maven私服 -->
    <distributionManagement>
        <repository>
            <id>release</id>
            <url>http://192.168.0.215:8081/repository/maven-releases/</url>
        </repository>

        <snapshotRepository>
            <id>snapshot</id>
            <url>http://192.168.0.215:8081/repository/maven-snapshots/</url>
        </snapshotRepository>
    </distributionManagement>

</project>
在maven的settings.xml中

    <servers>
        <server>
            <id>release</id>
            <username>admin</username>
            <password>admin123</password>
        </server> 
        <server>
            <id>snapshot</id>
            <username>admin</username>
            <password>admin123</password>
        </server>
    </servers>
注意 <id/> 值对应

运行命令：mvn clean package 打包jar；mvn deploy发布webjar到仓库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="webjars/test/1.0.0-SNAPSHOT/copy.js"></script>
</head>
<body>
    <h1>欢迎</h1>
    <img src="webjars/test/1.0.0-SNAPSHOT/web-bg.jpg" height="400px" width="100%">
</body>
</html>

可惜了，用这个打包的最大问题在于，打包的是在resource下面的，要额外处理，估计不行

观察

咱们实地观察一个实际项目的spring boot项目的打包情况：
在这里插入图片描述

在这里插入图片描述

里面是很典型的web包，然后看看目录：
在这里插入图片描述

好了，可以看到这里面是真的将静态资源打包过来了。

尤其可以得知，只要在build之前，将某个共用目录下面的静态资源都放到需要build的目录的构建目录下面，然后让他们打包，这样就可行了。

Gradle: How to add output jar file into an existing war file

将答案抄录–因为有墙：

0

I did this like the following:

def originalWar = file("../release/${sesame_version}/war/openrdf-sesame.war")
def outputDir = "./build/war"
def outputDirSesame = "$outputDir/sesame"

task extractWar(type: Copy) {
    from zipTree(originalWar)
    into "$outputDirSesame"
    outputs.upToDateWhen { false }
}

task copyJar(type: Copy, dependsOn: extractWar) {  
    from "./build/libs"
    into "$outputDirSesame/WEB-INF/lib"
    outputs.upToDateWhen { false }
}

task buildWar(type: Zip, dependsOn: copyJar) {
    archiveName "openrdf-sesame.war"
    destinationDir file("$outputDir")
    from "$outputDirSesame"
    outputs.upToDateWhen { false }
}

build.dependsOn buildWar

Add generated files with gradle before WAR creation

7

It is harder than I thought:

war {
    it.dependsOn minifyJavaScript
    exclude "js"
    from( "${buildDir}/js", {
        into 'js'
    })
}
I've to exclude the not minified JS files and than include the minified ones. The original files have to be excluded, otherwise the files in the js directory are duplicated (in the created WAR file).

配置以及操作

想来想去。。。嗯，还是不靠谱，不如就直接在root project写个任务，定义更新静态资源，然后每次打包可以手动执行任务更新资源，这样还好点。

    /***静态资源文件更新 begin**/
    task updateStatic{

    }
    updateStatic << {
        println "正在尝试更新静态资源文件，请稍后......."
        println "该任务目的为：将公用静态资源文件目录：res-static下面的webapp目录下所有文件目录都复制到spring boot的webapp下（除了WEB-INF）"
        println "根项目目录为：$rootProject.rootDir"
        println "当前模块目录为：$project.projectDir"
        println "当前模块的构建目录为：$project.buildDir"



        copy {
            from "${rootProject.rootDir}/res-static/src/main/webapp/"
//            include '**/*.html'
//            include '**/*.jsp'
//            include "*.properties"
//            include "**/.properties"
            exclude '/WEB-INF'
            into "${project.projectDir}/src/main/webapp/"
            //filter(org.apache.tools.ant.filters.ReplaceTokens, tokens: globalConfObj)
        }


        println "===========静态资源成功更新"


    }
    /***静态资源文件更新 end**/

执行：
gradle updateStatic

码农下的天桥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
spring boot 对多模块多网站项目利用webjars共用网站js/css等静态资源文件

前言对于开发多个网站而言，每次都要手动将js/css/images复制过去是很烦的事情，尤其是js等修改以后要人工逐个更新那就更麻烦了。下面就是解决这个问题的方案，请先参考：打包WebJar实现对静态资源文件的统一依赖管理下面是摘抄：96 年少懵懂丶流年梦 0.1 2018.08.15 09:29 字数 499 阅读 466评论 0喜欢 1WebJars的发布以及使用http:...
复制链接

扫一扫

专栏目录