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:
- Get the latest version of Rhino at http://www.mozilla.org/rhino/
- Get the latest version of JSLint for Rhino at http://www.jslint.com/rhino/
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 today's article show how to use Ant to automate the build process.
There's 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...
- The article, Using Ant to Consolidate CSS and JavaScript, to better understand
build.xml
- The website, http://ant.apache.org/, for more about Apache Ant
- And the website, http://www.jslint.com/lint.html, for more about JSLint
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. ^_^