Wednesday, September 19, 2012

How to minify JS and CSS files using Maven

Motivation: Minification of JS and CSS is a common best practice when developing web application. It's done to save bandwidth and keep single unified JS and CSS file, which once loaded will be used for subsequent requests.

Prerequisites: Introductory knowledge of Maven.

Steps:  I will use Samaxes minifier plugin. Read details about this plugin here. I will follow an example. Assuming your directory structure is similar to this
myApp
 |- pom.xml
 |
 `- src
      `-- main
            |-- java
            |     `-- [more dirs ommitted]
            |-- resources
            `-- webapp
                  |-- META-INF
                  |-- static
                  |       |-- css
                  |       |     |-- style1
                  |       |     |      |-- one.css
                  |       |     |      `-- two.css
                  |       |     |-- style2
                  |       |            `-- three.css
                  |       `-- js
                  |            `---  js1
                  |                   |-- a.js
                  |                   `-- b.js
                  `-- WEB-INF

In your build tag you need to add, plugin tag under  the build tag. For the above structure it looks like this:
<plugin>
    <groupId>com.samaxes.maven</groupId>
    <artifactId>maven-minify-plugin</artifactId>
    <version>1.3.5</version>
    <executions>
        <execution>
            <id>min-js</id>
            <phase>package</phase>
            <configuration>
                <cssSourceDir>static/css</cssSourceDir>
                <cssSourceFiles>
                    <cssSourceFile>style1/one.css</cssSourceFile>
                    <cssSourceFile>style1/two.css</cssSourceFile>
                    <cssSourceFile>style3/three.css</cssSourceFile>
                </cssSourceFiles>
                <cssTargetDir>css</cssTargetDir>
                <cssFinalFile>minified.css</cssFinalFile>

                <jsSourceDir>static/js</jsSourceDir>
                <jsSourceFiles>
                    <jsSourceFile>js1/a.js</jsSourceFile>
                    <jsSourceFile>js1/b.js</jsSourceFile>
                </jsSourceFiles>

                <jsTargetDir>js</jsTargetDir>
                <jsFinalFile>final.js</jsFinalFile>
            </configuration>
            <goals>
                <goal>minify</goal>
            </goals>
        </execution>
        <!-- more execution statements -->
    </executions>                              
</plugin>
Here is brief explanation:
  1. Line #10, is relative path from webapp directory
  2. Line #12, 13, 14 are file paths with respect to cssSourceDir
  3. Line #16, is the final directory wrt webapp where the minified file goes.
  4. Line #17, is file name that minified (and concatenated) files will have. Minified file will end with .min.css or .min.js

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. i find a free online service to compress js and minify css, so it will reduce the size of web page.

    ReplyDelete
  3. There is a lot of online tools to minify, but this method it's better because every change you make in your source files, it will be minified automatically by maven, and you don't need to copy and paste in your online service.
    If your source files are finalized, you can use an online service and plublish it, but if you are developing and changing your files many times, use Maven plugin.

    ReplyDelete

  4. I support the opinion of Daniel. While your solution is good but Maven for the job will be more appropriate
    Richard Brown dataroom software

    ReplyDelete