Web Development Automation - apache Ant

This is the first part in my series on Web Development Automation. In this post I am going to look at the historical process that I used for automating the minification of my JavaScript and CSS files for a website project using the Apache Ant open source project.

Apache Ant is a very powerful build tool, which I use for minifying my JavaScript and CSS using the YUI Compressor. Apache Ant is driven off of a build.xml file that you use to specify the commands and steps to build your application. In all honesty, this example of using Apache Ant is quite limited, but it does exactly what I want.

First, define a build.properties file.

# Project defaults
project.name = MyProject
project.fullname = MyProject version 1.0

# Define script
src.scripts = ./src/scripts
build.scripts = ./www/webroot/js/scripts
src.styles = ./src/stylesheets
build.styles = ./www/webroot/css/styles

# Define log filename
build.logfile = ant-build.log

# lib folder
yui.jar = ./assets/lib/yuicompressor-2.4.8pre.jar

We will then reference the properties file from our build.xml file. Here is a snippet of the build.xml file that will minify a single script and a single stylesheet.

<?xml version="1.0"?>
<project name="MyProject" default="build" basedir=".">

	<description>
		The buildfile does the following tasks:
			* Creates minified scripts
			* Creates minified stylesheets
	</description>

	<target name="prepare" description="Prepare environment for build">
		<!-- include external properies - common values for build file -->
		<property file="build.properties"/>

		<!-- Define log file -->
		<record name="${build.logfile}"/>

		<!-- Create the time stamp -->
		<tstamp>
			<format property="build.builddate" pattern="MM/dd/yy hh:mmaa"/>
		</tstamp>
		<echo message="Preparing to deploy..."/>
	</target>

	<target name="init" depends="prepare" description="Delete the build directories">
		<delete includeemptydirs="true">
			<fileset dir="${build.scripts}" includes="/*.js"/>
		</delete>
		<delete includeemptydirs="true">
			<fileset dir="${build.styles}" includes="/*.css"/>
		</delete>
		<echo message="Deleted build directores."/>
	</target>

	<target name="min-scripts" depends="init" description="Create the minified script and save the file in the build directory with the same filename">
		<java jar="${yui.jar}" fork="true">
			<arg value="-o" />
			<arg value="${build.scripts}/app.js" />
			<arg value="--line-break"/>
			<arg value="8000"/>
			<arg value="${src.scripts}/app.js"/>
		</java>
		<echo message="Minimized scripts successfully."/>
	</target>

	<target name="min-styles" depends="min-scripts" description="Create the minified stylesheet and save the file in the build directory with the same filename">
		<java jar="${yui.jar}" fork="true">
			<arg value="-o" />
			<arg value="${build.styles}/app.css" />
			<arg value="--line-break"/>
			<arg value="8000"/>
			<arg value="${src.styles}/app.css"/>
		</java>
		<echo message="Minimized stylesheets successfully."/>
	</target>
</project>

This approach works well, and actually has served me very well for a long time. Another bonus about using Ant is that there is support for building via Ant baked right into Eclipse. To run our Ant build script in Eclipse, right-click on a build.xml file and choose Run As > Ant Build to launch the build.

But, once I got started with Grunt, I quickly realized that it was much more comfortable and better suited for a web developer. And, like I said, I do prefer to work in JSON and JavaScript over XML. Just my personal preference. :)