Five Star Rating

This simple WordPress plug-in allows viewers to rate a post.

jQuery showMessage

This jQuery plug-in allows you to easily create a 'twitter-like' notification.

Web Tips

Sharing our knowledge of CFML & jQuery and many other web development tips.

Closure-Compiler and Ant to compress javascript

2
By admin in : Development, Mac, Tutorial // Apr 5 2012

IntelliJ Ant build.xml

IntelliJ Ant build.xml

Having used Eclipse and now IntelliJ for some time, I have often found it handy to build applications with Ant. It has been some time since I have taken a look at the process I was using and I really needed to find a better way to compress my javascript files, so I decided to look at refreshing the build.

My previous method had me setting up various properties, determining the OS being used and then targeting the compression of the javascript in the ant build.xml file. The process worked, but it was ugly and every OS had a different target for calling closure-compiler.

After several hours of reading the closure-compiler documentation, I happened to come across just what I was looking for (by accident). Closure-compiler now has a class for compiling in Ant [com.google.javascript.jscomp.ant.CompileTask]. What a find for me.

So here is how it works.

First you need to define the jscomp task-

<taskdef name="jscomp" classname="com.google.javascript.jscomp.ant.CompileTask"
classpath="${basedir}/closure-compiler/build/compiler.jar"/>

This creates a task named jscomp using compiler jar and class named CompileTask located in the Closure-Compiler directory.

Next we need to create our target. I simply named mine “compile”. Nested inside the target I call the jscomp task passing it the attributes. This is simple, but was tricky as some of the values passed to the attributes differ from the documented values.

For example, the compilation level will accept the following values “WHITESPACE_ONLY”,”SIMPLE_OPTIMIZATIONS”,”ADVANCED_OPTIMIZATIONS” via command line, but with the class the attribute values are “whitespace”,”simple”,”advanced”.

Finally nested inside of the jscomp task, we define our “externs” and “source” files. In my case I didn’t really need to define any externs, but for a demonstration purposes, I have provided it the code.

<target name="compile">

    <jscomp compilationLevel="simple" warning="verbose" debug="false"
            output="${assetsPath}/myfile.min.js">

        <externs dir="${basedir}/closure-compiler/contrib/externs">
            <file name="jquery-1.7.js"/>
        </externs>

        <sources dir="${assetsPath}">
            <file name="myfile.js"/>
        </sources>

    </jscomp>

</target>

That should be all you need inside your ant build file to create your compressed/minified javascript code.

About the Author

admin has written 26 articles for dingobytes.

Andrew Alba is a Software Engineer who resides in the Minneapolis-St Paul since 2010. Andrew has almost a decade and a half of web development and advertising experience. Andrew is currently employed with The Lacek Group in Minneapolis, MN after spending almost three years with Internet Broadcasting in St Paul, MN and five years with Interive Media Group in Fargo, ND. Andrew enjoys developing solutions using CFML, JavaScript/AJAX, Java, PHP and anything else he can steal from the web.

2 Responses to "Closure-Compiler and Ant to compress javascript"

  1. laura March 15, 2013 2:06 am

    Hi. When i use jscomp with compilation level advanced then one of my file is so compiled that i get an error saying a function in that file does not exist.When i use ‘simple’ then it works fine.Any idea how i can use advanced and still get it to work.

  2. admin August 14, 2013 3:24 pm

    Usually if there is an error when compiling with advanced, but not with simple, there is a validation issue with the JavaScript. Try taking your source JavaScript and running it through a linter. I prefer jshint [http://jshint.com], but if you want to get meticulous, then jslint [http://jslint.com] works.

Leave a Reply

 
You must be logged in to post a
video comment.