Reduce your code size and optimize performance by utilizing the YUI compressor to compress

Question

Reduce your code size and optimize performance by utilizing the YUI compressor to compress

While searching for a js/css compressing tool for my maven project, I came across this discussion on the topic - Maven Javascript Compressor

The tool functions well, but I am encountering one particular issue that I'm still trying to resolve.

If you do not specify a suffix with yui, it defaults to setting *-min and generates a new file alongside the original. For instance, if I had a file named scripts.js, after running the maven build with the plugin, I end up with both scripts.js and scripts-min.js files. What I actually need is only the *-min file. Even when I set <nosuffix> to true, it indicates that the compression was successful but does not override the file.

Is there a way to have only the compressed files retaining the original name?

java javascript maven yui

Answer 1

Answer №1

Indeed, the maven Javascript Compressor in use successfully compressed the files. However, it seems that during the maven package lifecycle, compression occurred at the prepare-package phase. Subsequently, in the package phase, the maven-war-plugin reverted the original files and replaced the compressed versions.

    <plugin>
            <groupId>net.alchim31.maven</groupId>
            <artifactId>yuicompressor-maven-plugin</artifactId>
            <version>1.5.1</version>
            <executions>
                <execution>
                <id>yui-compress</id>
                <phase>prepare-package</phase>
                    <goals>
                        <goal>compress</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <excludes>
                    <exclude>**/*-min.js</exclude>
                    <exclude>**/*.min.js</exclude>
                    <exclude>**/*-min.css</exclude>
                    <exclude>**/*.min.css</exclude>
                    <exclude>**/amazeui*</exclude>
                    <exclude>**/*.css</exclude>
                </excludes>
                <encoding>UTF-8</encoding>
                <nosuffix>true</nosuffix>
                <statistics>false</statistics>
                <linebreakpos>5000</linebreakpos>
                <useSmallestFile>true</useSmallestFile>
                <jswarn>false</jswarn>
                <warSourceDirectory>${basedir}/web</warSourceDirectory>
                <webappDirectory>${project.build.directory}/min</webappDirectory>
                <skip>false</skip>
            </configuration>
        </plugin> 
         <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <webResources>
                    <resource>
                        <directory>${project.build.directory}/min</directory>
                    </resource>
                </webResources>
            </configuration>
        </plugin>

Answer 2

Indeed, the maven Javascript Compressor in use successfully compressed the files. However, it seems that during the maven package lifecycle, compression occurred at the prepare-package phase. Subsequently, in the package phase, the maven-war-plugin reverted the original files and replaced the compressed versions.

    <plugin>
            <groupId>net.alchim31.maven</groupId>
            <artifactId>yuicompressor-maven-plugin</artifactId>
            <version>1.5.1</version>
            <executions>
                <execution>
                <id>yui-compress</id>
                <phase>prepare-package</phase>
                    <goals>
                        <goal>compress</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <excludes>
                    <exclude>**/*-min.js</exclude>
                    <exclude>**/*.min.js</exclude>
                    <exclude>**/*-min.css</exclude>
                    <exclude>**/*.min.css</exclude>
                    <exclude>**/amazeui*</exclude>
                    <exclude>**/*.css</exclude>
                </excludes>
                <encoding>UTF-8</encoding>
                <nosuffix>true</nosuffix>
                <statistics>false</statistics>
                <linebreakpos>5000</linebreakpos>
                <useSmallestFile>true</useSmallestFile>
                <jswarn>false</jswarn>
                <warSourceDirectory>${basedir}/web</warSourceDirectory>
                <webappDirectory>${project.build.directory}/min</webappDirectory>
                <skip>false</skip>
            </configuration>
        </plugin> 
         <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <webResources>
                    <resource>
                        <directory>${project.build.directory}/min</directory>
                    </resource>
                </webResources>
            </configuration>
        </plugin>

Answer 3

Answer №2

Here is the ant script I ended up creating for use with the maven ant plugin:

<delete includeEmptyDirs="false">
    <fileset dir="${basedir}/target/${project.build.finalName}/resources/js" excludes="**/*-min.js" />          
</delete>
<move todir="${basedir}/target/${project.build.finalName}/resources/js" includeemptydirs="false">
    <fileset dir="${basedir}/target/${project.build.finalName}/resources/js" />
    <mapper type="glob" from="*-min.js" to="*.js" />
</move>

<delete includeEmptyDirs="false">
<fileset dir="${basedir}/target/${project.build.finalName}/resources/css"
    excludes="**/*-min.css, **/*.ttf, **/*.png, **/*.jpg" />
</delete>
<move todir="${basedir}/target/${project.build.finalName}/resources/css" includeemptydirs="false">
    <fileset dir="${basedir}/target/${project.build.finalName}/resources/css" />
    <mapper type="glob" from="*-min.css" to="*.css" />
</move>

To provide a brief explanation: this script first removes any old uncompressed files and then changes the filenames of *-min.js and *-min.css to simply end in *.js and *.css.

I have tested it and it works perfectly. Additionally, please be cautious if you have other types of files in the /js or /css directories (files that do not end in .js or .css). You will want to exclude those file types by adding their extensions to the exclude property.

Answer 4

Here is the ant script I ended up creating for use with the maven ant plugin:

<delete includeEmptyDirs="false">
    <fileset dir="${basedir}/target/${project.build.finalName}/resources/js" excludes="**/*-min.js" />          
</delete>
<move todir="${basedir}/target/${project.build.finalName}/resources/js" includeemptydirs="false">
    <fileset dir="${basedir}/target/${project.build.finalName}/resources/js" />
    <mapper type="glob" from="*-min.js" to="*.js" />
</move>

<delete includeEmptyDirs="false">
<fileset dir="${basedir}/target/${project.build.finalName}/resources/css"
    excludes="**/*-min.css, **/*.ttf, **/*.png, **/*.jpg" />
</delete>
<move todir="${basedir}/target/${project.build.finalName}/resources/css" includeemptydirs="false">
    <fileset dir="${basedir}/target/${project.build.finalName}/resources/css" />
    <mapper type="glob" from="*-min.css" to="*.css" />
</move>

To provide a brief explanation: this script first removes any old uncompressed files and then changes the filenames of *-min.js and *-min.css to simply end in *.js and *.css.

I have tested it and it works perfectly. Additionally, please be cautious if you have other types of files in the /js or /css directories (files that do not end in .js or .css). You will want to exclude those file types by adding their extensions to the exclude property.

Reduce your code size and optimize performance by utilizing the YUI compressor to compress

Answer №1

Answer №2

Similar questions

Why is the BoxLayout panel in Java GUI behaving oddly when another BoxLayout panel is inside it?

Issue: Failed to locate or load primary class in Maven converted project

What is the best way to automatically add a space every four digits in an input field using JavaScript?

Performing a sequence of actions using Jquery Queue() function and iterating through each

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

Tips for changing a list item by pressing the Enter key

Enhancing Java's download speed performance

Unable to establish a connection between MongoDB and Node.js

Opt for buttons for color selection instead of a checkbox toggle

Unable to proceed with entering subsequent values into the input field after the initial input in reactjs

Shorten Text - React Native

How to Detect Font Resizing in Google Web Toolkit (GWT)

Usual method for managing delayed asynchronous callbacks

Obtain the printed value of a button via PHP and manipulate it using JavaScript

Transforming the text to a new line

Selenium (Java) automation encounters missing 'value' error when calling a function

Implementing PJAX requests with a touch of Instantclick style (loading essential content only upon hovering over the links)

Retrieve the value of the key in my AngularJS JSON object

It appears that the functionality of RegExp.prototype.exec() is not functioning as expected

utilize jQuery and AngularJS to transform a JSON object into a nested JSON structure