Using ANT to Build and Deploy JavaScript Projects

October 27, 2012

Any serious project should have a clear, consistent and automated build process. Having to build a project is not new for JAVA or C developers but for the long time it was pretty much neglected by front-end developers who spent most of their development time writing JavaScript, CSS and HTML.

"What are the advantages for JavaScript developers does the automated build process offer"? - you may ask. Well, I like the way you ask questions. Here is the short list of what you can do automatically:

You can minify all of your JavaScript and CSS files
You can concatenate JavaScript libraries into one file for faster loads
You can compile your Coffee scripts
You can compile your LESS files
You can run Unit Tests
You can package your application, including only files you need for production
You can have different build processes for Development and Production
You can upload files with SCP of FTP
You can automatically deploy your project with a single click.

Why is a Build Process Important

An automated (or scripted) build process offers a number of advantages, such as:

Resistance to Human Errors
Increased speed of deployment
Possibility of continues integration
Team scalability
Cost savings on deployment and support

Getting Started with ANT

I am a front-end developer, but our server side team is all about Java. So, it was natural for me to start using Apache Ant for building and deployment. Apache Ant can do a lot of tasks automatically and there is a pretty straight forward documentation what it can do at apache site. Here is the basic build.xml file to start with.

If you know the syntax of build.xml that Ant expects, you can skip this sections. For those of you who have not worked with Ant before, let me explain. An Ant build file is usually called build.xml and is an XML file that has its top node <project> that describes your project. In the project you can defined name, basedir and default target.

Next, you define all your targets. A target is a subset of tasks that might depend on another subset or be completely independent. In the example above I have two targets: clean and build. The build one (which is also the default one) will create a BUILD directory, the second one - clean - will delete it. Besides that tasks do not do anything else. The build target depends on clean, which means if you execute build target, it will first execute the clean target, making sure that the BUILD directory is recreated each time you build.

To execute you target type "ant target-name" in the console. Or just "ant" if you want to execute the default target.

Concatenate and Minify your Code

Now, lets get into the good parts. I want to build my project and get it ready for production and by this I mean I will concatenate my JavaScript libraries into one file and minify it with JSMIN library. Also, I will minify my CSS files. Here is the code:

Let me walk through the changes. First of all, I concatenate all files with contact task, which is a standard task with Ant in lines 12-14.

Then I minify all.js with JSMIN task, which is not part of Ant installation, and you will need to download the .jar file and put it in Ant jar directory. I define the custom task in line 3 and do actual minification in lines 16-19. Here is a quick link for you for JSMIN .tar file, which you will need to put into

/opt/local/share/java/apache-ant/lib

if you are on a Max OS X 10.7.5 (Lion) or the appropriate folder for you OS.

Zipping Up, Uploading with SCP, Deploying

Finally, your project is ready to be deployed into the development server. To do this, we are going to tar only the necessary files, upload it with SCP and deploying on the remove server.

<input message="       ---> Please enter ${ftp-user} password for ${ftp-host}:"
					addproperty="ftp-pass">
			<handler type="secure"/>
		</input>

<sshexec host="${ftp-host}" username="${ftp-user}" password="${ftp-pass}"
			command="cd ${ftp-dir}; tar -xzvf build.tar.gz > /dev/null;
			         rm -f ${ftp-dir}/build.tar.gz;"/>
    </target>
</project>

In lines 27-32 I create a tar of my project excluding files that I do not need on my server, namely my BUILD folder and the build.xml file. Then I zip it up with gzip in line 33 and in lines 37-47 I upload it to the destination server, which is defined in lines 3-5 and securely ask user to enter the password. And finally, I remotely execute my ssh command to unpack the archive into the right place.

That's pretty cool. My entire process is only 25 seconds, it does all for me automatically and there is no room for human error. Besides, I can teach anyone how to do this without a problem.