JavaScript build process using Ant

March 2nd, 2009 by Spocke

Projects written in JavaScript gets more and more complex and after a while you find your self needing a proper build process similar to the ones found for Java or .NET. We recently swapped our custom tools for JS concatenation and compression to one based on Apache Ant. Ant has been around for many years and we used this build tool when we developed Java applications so it has a large feature set and is very stable, well documented and it can be used on multiple operating systems.

But before we could use Ant we needed to rewrite preprocessing capabilities we had in our custom tool as a ant task. Having preprocessor statements in JavaScript is a very powerful thing especially for large projects where you might want to exclude or include a particular feature for a specific build target. We looked around for some existing engine but we couldn’t find any suitable for our specific needs.

Here is an example of a simple preprocessor statement:

// #ifdef somedefine

someLogic();

// #endif

someOtherLogic();

The above statement will only include the someLogic(); call if the somedefine is defined when it’s being preprocessed. This is very similar to languages like C/C++ or C#.

This is how the above code gets filtered using the ant task:

<preprocess infile="file.js" outfile="file.processed.js" defines="somedefine,someotherdefine" />

We also wanted to use the YUICompressor to reduce the size of the script. There where a few existing Ant task implementations for this tool but we didn’t find one that was exactly as we wanted it so we wrote our of task for this as well.

Here is an example on how to compress a simple JS file:

<yuicompress infile="file.js" outfile="file.min.js" />

Both these ant tasks and future tools will be added to a google code project called js-build-tools. If you have your own ant tasks you want to contribute to this project please let us know.

Posted in Development, Software, Uncategorized, Work

6 Responses

  1. Moxiecode Developer Blog » Blog Archive » JavaScript build process … Says:

    [...] Go here to see the original: Moxiecode Developer Blog » Blog Archive » JavaScript build process … [...]

  2. Ajaxian » JavaScript build process using Ant Says:

    [...] Johan “Spocke” Sörlin of Moxiecode has written an article on a build process that uses Ant to munge JavaScript. [...]

  3. Ajax Girl » Blog Archive » JavaScript build process using Ant Says:

    [...] Johan “Spocke” Sörlin of Moxiecode has written an article on a build process that uses Ant to munge JavaScript. [...]

  4. JavaScript build process using Ant | Guilda Blog Says:

    [...] Johan “Spocke” Sörlin of Moxiecode has written an article on a build process that uses Ant to munge JavaScript. [...]

  5. JavaScript Build Management (Sprockets, Ant) « WebDevTeam’s Blog Says:

    [...] Ein erläuternder Artikel dazu: JavaScript build process using Ant [...]

  6. Twitter Trackbacks for Moxiecode Developer Blog » Blog Archive » JavaScript build process using Ant [moxiecode.com] on Topsy.com Says:

    [...] Moxiecode Developer Blog » Blog Archive » JavaScript build process using Ant blog.moxiecode.com/2009/03/02/javascript-build-process-using-ant – view page – cached Moxiecode Developer Blog, developers of TinyMCE. — From the page [...]