JAWR Combine Minify Compress Javascript CSS Files

In this tutorial we will show you how to use JAWR to Combine, Minify and Compress JavaScript/Css Files. This is a really cool library. It does exactly as indicated. It can combine, compress and minify your JavaScript or Css files. The best part is this happens once at build time, which means you can easily debug your javascript files if needed. Simply by adding the debug flag to true. If you don’t like the extra servlet mappings and you thing that it’s better to generate them at build time, then have a look here, this article explains how you can combine, minify and compress your resources using maven-minify-plugin.

First css file: style.css

body {
    width: 100%;
}

Second css file: custom.css

p {
    font-size: 1em;
}

First JavaScript file: script.js

function welcome(){
    this.welcome = "hello, World!";
}

Second JavaScript file: custom.js

function custom(){
    this.custom = "Custom";
}

JAWR.properties

You can combine, compress and minify your javascript/css files using jawr. You must add a jawr.properties file to your classpath. In this file you create bundles of JavaScript or Css files which you can later include in your html page. Lets look at the configuration below:

# Common properties you can easily debug the javascript by setting the jawr.debug.on to true
jawr.debug.on=false
jawr.gzip.on=true
jawr.gzip.ie6.on=false
jawr.charset.name=UTF-8


# javascript
jawr.js.bundle.script.id=/script.min.js
jawr.js.bundle.script.mappings=/resource/js/
jawr.js.bundle.script.global=false
jawr.js.bundle.script.order=1


# Css
jawr.css.bundle.style.id=/style.min.css
jawr.css.bundle.style.mappings=/resource/css/
jawr.css.bundle.style.global=false
jawr.css.bundle.style.order=1

Include the minified css/javascript in html page

In the jawr.properties file we bundled all the javascript files located in the /resource/js/ folder and combined, minified and compressed them in the script.min.js file. Also the css files located in the /resource/css/ folder have been combined, minified and compressed into the style.min.css file. We must include this files using the jwr taglibrary.

Info: The cool thing about jawr is that if you put the debug flag on you don’t have to modify your existing html page to include the decompressed, uglified javascript or css files. It does that out of the box.
<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JAWR Combine Minify Compress Javascript CSS</title>
    <jwr:style src="/style.min.css" />
    <jwr:script src="/script.min.js"/>
</head>
<body>
    <h1>JAWR Combine Minify Compress Javascript CSS</h1>
</body>
</html>

Here is an example when you put the debug flag on:

<html>
<head>
    <title>JAWR Combine Minify Compress Javascript CSS</title>
    <script type="text/javascript">/* Start adding global members. */</script>
    <script type="text/javascript">/* Finished adding global members. */</script>
    <script type="text/javascript">/* Start adding members resolved by '/style.min.css'. Bundle id is: '/style.min.css' */</script>
    <link rel="stylesheet" type="text/css" media="screen" href="/jawr-combine-minify/resource/css/custom.css?d=920065524" />
    <link rel="stylesheet" type="text/css" media="screen" href="/jawr-combine-minify/resource/css/style.css?d=1639101656" />
    <script type="text/javascript">/* Finished adding members resolved by /style.min.css */</script>

    <script type="text/javascript">/* Start adding global members. */</script>
    <script type="text/javascript">/* Finished adding global members. */</script>
    <script type="text/javascript">/* Start adding members resolved by '/script.min.js'. Bundle id is: '/script.min.js' */</script>
    <script type="text/javascript" src="/jawr-combine-minify/resource/js/custom.js?d=353367369" ></script>
    <script type="text/javascript" src="/jawr-combine-minify/resource/js/script.js?d=801183762" ></script>
    <script type="text/javascript">/* Finished adding members resolved by /script.min.js */</script>

</head>
<body>
<h1>JAWR Combine Minify Compress Javascript CSS</h1>
</body>
</html>

Register JawrServlet

In order for jawr to pickup the javascript/css files we need to register the JawrServlet and mat them to the javascript and css files.

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                             http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">

    <servlet>
        <servlet-name>JavascriptServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
            <param-name>configLocation</param-name>
            <param-value>/jawr.properties</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>CSSServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
            <param-name>configLocation</param-name>
            <param-value>/jawr.properties</param-value>
        </init-param>
        <init-param>
            <param-name>type</param-name>
            <param-value>css</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>JavascriptServlet</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>CSSServlet</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>

</web-app>

Generated HTML

The generated html page looks like this.

<html>
<head>
    <title>JAWR Combine Minify Compress Javascript CSS</title>
    <link rel="stylesheet" type="text/css" media="screen" href="/jawr-combine-minify/gzip_1081271630/style.css" />
    <script type="text/javascript" src="/jawr-combine-minify/gzip_N648455606/script.js" ></script>
</head>
<body>
    <h1>JAWR Combine Minify Compress Javascript CSS</h1>
</body>
</html>

References

Downloads

You may also like...