Automatically compile JavaScript applications using Google Closure and Ant

As I said on insideRIA, the power of Google Closure is represented by the additional tools provided by Google: the Java compiler (which compress and optimize your javascript files) and the python script (which calculates dependencies). This tools however are not so user friendly, because you have to rely on the terminal and invoke them through command lines, a pretty annoying procedure that can scare people which usually rely only on visual tools.
Fortunately is relatively easy to automatize this compilation, by using Ant (a Java-based build tool). Ant is included by default in Eclipse standard platform (anyway some stand alone Eclipse-based ide such Aptana don’t include it… it’s time to use such programs as Eclipse plugins!) and can be configured and used by simply writing an xml file formally named “build.xml“. A build file contains one root node “project” and at least one “target” node containing tasks to execute, tasks are a series of different operations that can be executed by Ant, such create/delete files and folders, zip/unzip a file, running scripts and more. To automatize the deployment of our JavaScript application, we will invoke the and the compiler.jar from Ant in a single statement, and we will print the result to a specific file.
To invoke a script, we have to use the exec tag and specify at least the param “executable“, which indicates the location of the script to execute, then by setting the parameter “output” the result returned from the script will be redirect to the specified file. Finally, to avoid undesired output in the file, such debug information and errors, we have to specify also a file which will receive this type of data by using the “error” parameter.
Since, paths to scripts and other files can be very long, we can create custom variables to hold these information and then reusing them in our script invocations. This is as simple as use the “property” tag and specify a “name” and a “value” attributes.
The following is an example of how a build.xml will looks like:

<?xml version="1.0" encoding="utf-8"?>
	name="Google Closure Ant Test" 
	<!-- Full path of the current project -->
	<property name="projectPath" value="/Users/davidezanotti/Documents/workspace/GoogleClosure" />
	<!-- Full path to Closure library -->
	<property name="closurePath" value="${projectPath}/closure" />
	<!-- List of javascript files to compile -->
	<property name="filesToCompile" value="${projectPath}/my-closure-app.js" />
	<!-- Full path to the compiler jar -->
	<property name="compilerPath" value="/Users/davidezanotti/Documents/closure-compiler/compiler.jar" />
	<!-- Full path to the compiled file (created if not defined) -->
	<property name="outputPath" value="${projectPath}/ant-generation.js" />
	<!-- Full path to the file which will contains debug output and errors -->
	<property name="logPath" value="${projectPath}/closure-compiler.log" />
	<!-- Compilation level -->
	<property name="compilation" value="WHITESPACE_ONLY" />
	<target name="JavaScript Compilation">
		<exec error="${logPath}" output="${outputPath}" executable="${closurePath}/bin/">
			<arg line="-i ${filesToCompile} -p ${closurePath} -o compiled -c ${compilerPath} -f '--compilation_level=${compilation}'" />

The build.xml above will first gathering all the necessary Closure files (dependencies) and then will compile the resulting js using a WHITESPACE_ONLY compilation. The result will be printed to the file “ant-generation.js” and the debug to “closure-compiler.log”.
To run the Ant process: right click on the build.xml and choose Run as Ant Build. This procedure can be also configured in order to execute all the task each time a file in the project is saved, but it’s not a great idea because the process can takes several seconds to complete.
If you want to learn more about Ant (I have to learn a lot too, since I never used it before :P), check the reference here:

  • nice post. thanks.

  • Hello there, I discovered your web site via Google while searching for a
    similar topic, your website came up, it appears great.
    I have bookmarked it in my google bookmarks.
    Hello there, just become alert to your blog thru Google, and
    located that it is truly informative. I’m gonna be careful for brussels. I will appreciate if you happen to proceed this in future. A lot of other folks shall be benefited from your writing. Cheers!