捆绑和缩小在 Maven 网络项目中不起作用

Question

I am trying this plugin (to optimize performance) in my sample project to bundle all the CSS into one CSS, and all the JS into one JS with minified version, but project structure remains same after clean & build. Nothing is changing as per expectation.

I have also raised similar ticket in Github , but did not receive any update.

Please find my project structure :

├── pom.xml
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── darshan
    │   │           └── SourceMapFilter.java
    │   ├── resources
    │   │   ├── readme.txt
    │   │   └── static-bundles.json
    │   └── webapp
    │       ├── css
    │       │   ├── custom.css
    │       │   └── style.css
    │       ├── index.html
    │       ├── js
    │       │   ├── custom.js
    │       │   └── script.js
    │       ├── META-INF
    │       │   └── context.xml
    │       └── WEB-INF
    │           └── web.xml
    └── test
        └── java

static-bundles.json :

{
    "bundles": [
        {
            "type": "css",
            "name": "static-combined.css",
            "files": [
                "custom.css",
                "style.css"
            ]
        },
        {
            "type": "js",
            "name": "static-combined.js",
            "files": [
                "custom.js",
                "script.js"
            ]
        }
    ]
}

pom.xml plugin configuration :

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.7.6</version>
    <executions>
        <execution>
            <id>bundle-minify</id>
            <phase>package</phase>
            <goals>
                <goal>minify</goal>
            </goals>
            <configuration>
                <webappSourceDir>${project.basedir}</webappSourceDir>
                <webappTargetDir>${project.basedir}</webappTargetDir>

                <cssSourceDir>css</cssSourceDir>
                <cssSourceFiles>
                    <cssSourceFile>custom.css</cssSourceFile>
                    <cssSourceFile>style.css</cssSourceFile>
                </cssSourceFiles>
                <cssTargetDir>css</cssTargetDir>
                <cssFinalFile>static-combined.css</cssFinalFile>
                <cssSourceDir>js</cssSourceDir>
                <jsSourceFiles>
                    <jsSourceFile>custom.js</jsSourceFile>
                    <jsSourceFile>script.js</jsSourceFile>
                </jsSourceFiles>
                <jsTargetDir>js</jsTargetDir>
                <jsFinalFile>static-combined.js</jsFinalFile>
            </configuration>
        </execution>
    </executions>
</plugin>

I have tried it with absolute path, but no luck with that as well. Using JDK 1.8.

Answer 1

I am sharing alternative plugin, which solves my purpose, since previous plugin (see question) is neither working for me, nor receiving any update on both here as well as on github.

Add below plugin in your pom.xml .

<plugin>
    <groupId>com.github.kospiotr</groupId>
    <artifactId>bundler-maven-plugin</artifactId>
    <version>1.8</version>
    <executions>
        <execution>
            <id>js</id>
            <goals>
                <goal>process</goal>
            </goals>
            <configuration>
                <verbose>true</verbose>
                <munge>false</munge>
                <inputFilePah>${project.basedir}/src/main/webapp/index-dev.html</inputFilePah>
                <outputFilePath>${project.build.directory}/${project.build.finalName}/index.html</outputFilePath>
            </configuration>
        </execution>
    </executions>
</plugin>

Kindly note, no need of index.html. It will be generated automatically.

index-dev.html : (Kindly note, bundle comment is mandatory)

<!-- bundle:css app-#hash#.min.css-->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/custom.css" rel="stylesheet" type="text/css"/>
<!-- /bundle -->

<!-- bundle:js app-#hash#.min.js-->
<script src="js/custom.js"></script>
<script src="js/script.js"></script>
<!-- /bundle -->

Generated index.html :

<link rel="stylesheet" href="app-d3c9aea5a76e300e113c07b3717683b3.min.css"/>
<script src="app-f1b7efa7214d328d11623c0f4b3efb19.min.js"></script>

Output structure :

.
├── app-d3c9aea5a76e300e113c07b3717683b3.min.css
├── app-f1b7efa7214d328d11623c0f4b3efb19.min.js
├── css
│   ├── custom.css
│   └── style.css
├── index-dev.html
├── index.html
├── js
│   ├── app.js
│   ├── custom.js
│   └── script.js
├── META-INF
│   └── context.xml
└── WEB-INF
    ├── classes
    │   ├── com
    │   │   └── darshan
    │   │       └── SourceMapFilter.class
    │   ├── readme.txt
    │   └── static-bundles.json
    └── web.xml

My working github project : https://github.com/darsh9292/bundle-web-app

If anyone, still has solution with my previous plugin as mentioned in question, please post your answer.