Unobtrusive way to combine and compress javascript/css for java/spring/maven applications?

Question

I'd like to add some kind of library, or maven plugin, or 'something' to combine and compress my javascript and css source files.

However, I think this is pretty difficult to do unobtrusively with Java. The Rails people have pretty much solved this problem... it uses the unjoined/uncompressed files for development and then it compresses everything during production. It does this unobtrusively as you don't have to change your html headers or anything like that - it works for both testing and production. This is more or less what I want. Does it even exist in the Java space?

The last thing I want is to comment and uncomment lines of freemarker/html code for development and production - I want everything to be the same. Ideally, I'd want to be able to leave Tomcat running and code my javascript and css, and see my changes instantly - no delays or hickups. I also don't want to have to manually run a command to generate the new javascript every time I make a change... or even have some daemon constantly update it (because then it might not be instantaneous when I'm testing). At the same time, if I'm going to package up my war for production, I want it to use the joined and compressed files instead.

Is this even possible? If so, what tool should I be looking at? I know there are quite a few that do some of this, but they've fallen short on the "unobtrusive" aspect.

Thanks

Wilhelm Kleu · Accepted Answer · 2011-11-23 08:42:40Z

13

A solution that has worked for me is using the maven-minify-plugin (groupId is com.samaxes.maven) but only when building for production. Use a build property to specify if you are in development mode or not. Link to plugin

You can then have something like this (I don't know freemarker so I am just pasting some JSP code but I am sure it can easily be converted):

<c:choose>
    <c:when test="${developmentMode}">
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/custom1.css"/>"/>
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/custom2.css"/>"/>
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/another1.css"/>"/>
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/another2.css"/>"/>
        <script type="text/javascript" src="<c:url value="/js/mylibrary.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/js/more.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/js/util.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/js/whatever.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/js/more.js"/>"></script>
    </c:when>
    <c:otherwise>
        <link rel="stylesheet" type="text/css" href="<c:url value="/css/minified.css"/>"/>
        <script type="text/javascript" src="<c:url value="/js/minified.js"/>"></script>
    </c:otherwise>
</c:choose>

This way non-minified/combined JS/css is used while in development and the minified css only used when building for production.

EDIT: As requested here is the code to expose Spring-defined beans on the ServletContext:

<bean class="org.springframework.web.context.support.ServletContextAttributeExporter">
    <property name="attributes">
        <map>
            <!-- Obviously this can be changed to read from properties file -->
            <entry key="developmentMode" value="false" /> 
        </map>
    </property>
</bean>

edited Nov 23, 2011 at 8:42

answered Nov 21, 2011 at 14:12

Wilhelm Kleu

11.1k4 gold badges41 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

egervari Over a year ago

So am I to have a spring mvc interceptor that passes in a developmentMode variable to all controller views then? Is that the only way?

egervari Over a year ago

Is there anything... I dunno... a bit more industrial strength? I'm going to have at least 50 javascript files... probably 100-150.

Wilhelm Kleu Over a year ago

I don't think an interceptor is necessary. I use org.springframework.web.context.support.ServletContextAttributeExporter that exposes Spring-defined objects as SerletContext attributes.

egervari Over a year ago

Ah, I didn't know you could do that actually. Can you cut/paste the code you have to enable that please?

Wilhelm Kleu Over a year ago

Update question with the bean definition for ServletContextAttributeExporter.

|

flob · Accepted Answer · 2016-09-27 07:32:24Z

4

Jawr is a library that provides compression and merge of css/js files. It provides a Tag for the html include statements. This make it possible to use the same unmodified JSP Page for development (with unmodified css/js) and production (merged and minified).

wro4j seams to similar features.

edited Sep 27, 2016 at 7:32

flob

3,9182 gold badges38 silver badges58 bronze badges

answered May 24, 2013 at 14:06

Ralph

121k57 gold badges300 silver badges391 bronze badges

Comments

antoine · Accepted Answer · 2014-05-13 15:24:00Z

Using maven-minify-pluginworked for me too.

But I manage to find an even less intrusive way to use it than using conditional tags like c:when, by combining it with the maven-war-plugin.

This code snippet can be used as it is :

First, start by minifying the CSS/JS without using suffix (meaning that the files keep their name)

<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>minify-maven-plugin</artifactId>
    <version>1.7.2</version>
    <executions>
        <execution>
            <id>default-minify</id>
            <phase>prepare-package</phase>
            <configuration>
               <charset>UTF-8</charset>
               <skipMerge>true</skipMerge> <!-- do not create one big file -->
               <nosuffix>true</nosuffix> <!-- do not use suffix like 'min' -->

               <cssSourceDir>css</cssSourceDir>
               <cssSourceIncludes>
                   <cssSourceInclude>*.css</cssSourceInclude>
               </cssSourceIncludes>

               <jsSourceDir>js</jsSourceDir>
               <jsSourceIncludes>
                   <jsSourceInclude>*.js</jsSourceInclude>
               </jsSourceIncludes>

           </configuration>
           <goals>
               <goal>minify</goal>
           </goals>
       </execution>
   </executions>

Then, when building the war file, do not overide CSS/JS files (which are already generated in the target by the minify goal)

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.4</version>
    <configuration>
        <!-- in order to use minify filed listed bellow -->
        <warSourceExcludes>**/*.css, **/*.js</warSourceExcludes>
    </configuration>
</plugin>

The built war will then contains the exact same files but compressed. (this might not be the best way to perform minifying, but it doesn't change anything in development)

Hope this helps...

Collectives™ on Stack Overflow

Unobtrusive way to combine and compress javascript/css for java/spring/maven applications?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related