Jenkins CI + JSLint = Javascript Quality Checking

I have recently implemented a Jenkins Continuous Integration server at work to handle automated testing of our projects and systems. Having never used a CI server before, or even ant scripts, it has taken a lot of effort to get my head around how it all works and what I can do through it. Since I work in PHP, my first task was to find a way to build my PHP and eventually I found the really helpful Jenkins Job PHP Template which handled all the hard work getting a build server up and running (and spitting out lots of PHP errors and dodgy coding!). If you are wanting to set up Jenkins with PHP, check it out.

After I worked out PHP I moved onto Javascript validation/quality checking, which took more effort. JSLint is the standard for quality checking JS code, as it checks for common problems and dodgy-coding styles to keep code solid. So a bit of googling around JSLint produced the JSLint4Java project which is a version of JSLint packaged as a java application. This makes it easier to run via command line – which is a plus

That project also has an ant task to make it easy to work in Ant, but not knowing Ant it made no sense to me and I went in search of an easier solution.

I did some more googling, and eventually found a way to use the java module in my ant script. I had the problem where I wanted it to dynamicaly check all my .js files but ignore things like jQuery. Since the java package had no way to exclude files, I had to get creative. This is what I came up with:

1
2
3
4
5
6
7
8
9
10

<target name="jslint" description="Run the JSLint tool on JS files">
  <fileset dir="public/scripts" id="jsfiles.raw">
    <include name="**/*.js" />
    <exclude name="**/*.min.js" />
  </fileset>
  <pathconvert pathsep=" " property="jsfiles.clean" refid="jsfiles.raw" />
  <exec executable="java" output="build/logs/jslint.xml">
    <arg line="-jar jslint4java.jar --report xml ${jsfiles.clean}" />
  </exec>
</target>

I will go through this line-by-line, and explain it as I understand it. Hopefully you will be able to understand it and adapt it to your own requirements.

1. Start the build target, with the name jslint
2. Build a fileset called ‘jsfiles.raw’, based in the public/scripts/ directory
3. Only include files (inc. sub-directories) which end with .js
4. Exclude any file ending in .min.js
5. Close fileset section
6. Convert the fileset identified by ‘jsfiles.raw’ into a string, separated with a space, and call it ‘jsfiles.clean’
7. Execute a java command, saving output to ‘build/logs/jslint.xml’
8. Specify the arguments for the java command, which include specifying the jslint jar file, the output format, and the file list to check
9. Close exec section
10. Close target section

In summary, this build target runs the JSLint check on every file ending in .js, but not ending in .min.js, within the public/scripts/ directory. It outputs the results of this check into an XML file located at build/logs/jslint.xml.

Finally, to view the errors in Jenkins, you can put the location of that .xml file in the Violations Report under ‘jslint’.

So that’s about it. It’s not perfect, it’s not pretty, but I’ve only been using Ant scripts for a couple of days – so give me some credit. If you have a better solution, please let me know