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
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=1Include 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.
<%@ 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>
