Running JSLint With Your Ant Build

In the article, Using Ant to Consolidate CSS and JavaScript, we discussed how to use Ant for consolidating and compressing JavaScript and CSS. Today we will take that a step further by adding JSLint JavaScript validation to the process. JSLint is a code quality tool that checks your code for common JavaScript errors, best practices, and optimizations.

Keep in mind that using JSLint will hurt your feelings, so only read on if you are either brave or foolhardy.

How It’s Done…

We will be modifying the ant build script from YUI-EXT-MVC at http://yui-ext-mvc.googlecode.com/svn/trunk/build.xml.

First you need two files:

Extract the JAR from the Rhino download (it was named js-14.jar for me, so I renamed it to the more useful rhino-1.7R2.jar) and the JSLint JavaScript file. Move them both to a folder accessible by your build.

Setup build properties pointing to the two files you downloaded:

<property name="rhino.jar" value="${basedir}/bin/rhino-1.7R2.jar"/>
<property name="jslint.js" value="${basedir}/bin/jslint.js"/>

Execute JSLint on the consolidated JavaScript files:

<echo message="JSLinting consolidatedFile.js"/>
<apply executable="java" parallel="false">
	<filelist dir="${builddir}/js">
		<file name="consolidatedFile.js"/>
	</filelist>
	<arg line="-jar"/>
	<arg path="${rhino.jar}"/>
	<arg path="${jslint.js}"/>
</apply>

Now when the script consolidates your JavaScript files, it also executes JSLint. JSLint will output the errors and warnings it finds, but will only stop the build if it finds a critical error.

Configuring JSLint:

The off the shelf version of JSLint is very strict and may not suit your needs. For work on Mint.com I had to register a bunch of globals and change the default configuration. To change your default configuration, look in the jslint.js file for the line:

if(!JSLINT(input,{…}

The properties defined inside the object can be activated by setting them to true. A full list of properties is available at http://www.jslint.com/lint.html#options. You will most likely want to set the property browser and widget to true, which will allow browser and YUI globals.

If you have additional globals, then you need to find the browser={…} object in jslint.js. Add any global variables to this object where the variable name is the key and set its value to false. For example, if you use JQuery you might want to add the following two globals:

browser={/* already defined properties */
jquery: false,
$: false
}

How It Works…

JSLint uses a variety of techniques to scan JavaScript files against a collection of validations. The validations are customizable and can be turned on or off by modifying jslint.js. Since jslint.js is a JavaScript file, Rhino is needed to run JavaScript from the command line. You can execute this Rhino command directly on the command line, but todays article show how to use Ant to automate the build process.

There&rsquos More…

JSLint can take a while to execute, especially on large, consolidated files. Advanced users of Ant may want to define a property to make JSLint an optional part of their build:

<if>
	<isset property="enable.jslint"/>
	<then>
		<echo message="validating consolidatedFile"/>
		<apply executable="java" parallel="false">
			<filelist dir="${builddir}/js">
				<file name="consolidatedFile"/>
			</filelist>
			<arg line="-jar"/>
			<arg path="${rhino.jar}"/>
			<arg path="${jslint.js}"/>
		</apply>
	</then>
</if>

By default this code block will not execute. You will need to call Ant in the following way to execute JSLint:

ant -Denable.jslint=true package

More to Come…

I am fairly happy with the current build.xml, but there is a lot of repeated patterns (consolidate, jslint, compress). At Mint.com we have changed our consolidation script to use macros, making our build.xml simpler. However, macros are finicky and more complicated than calling simple ant commands. I anticipate that in the next couple months I will improve the build script to use macros and write an article explaining how.

See Also…

Note From Matt…

I know some of you are anticipating improvements to the Radial Menu that I introduced last week. I am working on it, but I do not have anything production ready yet. I hope to deliver a more complete version sometime next week. Who knows, if I feel it is good enough, I might submit it to the YUI gallery. ^_^

More Thoughts on Compression

Last weeks article, Development - Optimizing JavaScript Compression and the user comments, plus Nick Zakas document on how to improve YUI compression performance, Helping The YUI Compressor, left me thinking about other ways to improve the compression of YUI compressor. We learned last week that the compressor will obfuscate local functions, defined as variables, into variables with names that are only single characters. Extending that idea further I realized that if an object ...

Optimizing JavaScript Compression

The power of JavaScript libraries are increasing everyday, and many more (free) tools are available now than ever before. There are so many easy to use JavaScript addons, that an unwary developer can quickly degrade the performance of their site. To decrease the performance hit when adding additional JavaScript to a site, many developers use compression tools, such as YUI Compressor. At the very least, a compressor remove all white-spaces from your code, but ...

Using YUI Doc to Document JavaScript Files

To start, I need to say that the YUI Documentation tool is, by far, the most difficult to use tool developed by the YAHOO team. Getting YUIDoc working will take some time and patience. For starters, Python must be installed with several addons. Then once Python is working, your JavaScript files need to be completely reorganized, as each module must be in a separate directory. And lastly, if you augment an object in a ...

Using Ant to Consolidate CSS and JavaScript

Given the increasing complexity of the JavaScript and CSS code used to drive websites, it is ever more important to optimize for performance. A great tool to help with site optimizations is YSlow, and one of its recommendations is to consolidate CSS and JavaScript files into the fewest number of files as possible. This is because all browsers have limitations on the number of requests they can make to the server to retrieve files ...

YUI JavaScript and CSS Compressor

I finally had some time/need to explore a new JavaScript compressor and had been hearing good things about the YUI compressor, so I took a look at it. The YUI compressor not only compresses (slightly better than JSMin) but claims to do some safe obfuscation. Altogether it claims to save an additional 18% over JSMin (5-10% over rhino), which is about what I experienced in my testing today. That is a substantial savings ...