Justin Chmura

JSHint Using Gulp

By on

A JavaScript task runner has become a main stay for almost any new project I start. Some people think that runners like Node.js projects, but any project can benefit from a simple task runner. I’ve started using Gulp to do tasks in .Net projects and Go projects I’ve been toying around with. When it comes to building CSS and JavaScript, specifically, it’s bliss.

Over time, I want to share some tasks I’ve created or tricks I’ve found using Gulp that hopefully could make your life easier. The first one, although simple, can be quite useful. I’m going to show how you can lint your JavaScript files with JSHint using Gulp. If you’ve never heard of JSHint, take a look at this quick article that explains what JSHint is. I’m assuming for this post that you have Node.js with NPM installed.

Install Packages

At the minimum, there’s only two Node packages that are needed to get this running, gulp-jshint. To do that, just install them from NPM.

npm install gulp gulp-jshint --save-dev

This should add gulp and gulp-jshint to your _package.json__ _as well as install them to the _nodemodules folder. Now you are ready to go.

Create Gulpfile

If you aren’t familiar with Gulp and don’t know what the Gulpfile is, it’s where you specify your tasks and how they behave. For our instance, we want to create a jshint task that we can run to lint our JavaScript files.  Create a file with the name gulpfile.js at the root of your project, or at the same level of your package.json.

The first thing to do is bring in our two packages.

'use strict';

var gulp = require('gulp');
var jshint = require('gulp-jshint');

 Create the Task

Now comes the meat and potatoes of Gulp, tasks. Tasks are segments of actions that you want to take on your project, whether it be linting, compressing, concatenation, or creating a build. I’ll just call this task ‘jshint‘.

gulp.task('jshint', function () { });

We can now do gulp jshint from the command line to execute this task.

Next to is get JSHint up and running. With Gulp, you need to specify an array of source files to pull into its stream. Then those files are piped into the next operation you want to do. This is the defining difference between Gulp and Grunt, are streams. In this case, we will have our JavaScript files get piped through the JSHint plugin. Out will come some output to the console on how the files tested.

This is how it looks using code.

gulp.src(['*.js', 'public/js/**/*.js']).pipe(jshint());

The src function uses the node-glob syntax of specifying file paths. It’s flexible allowing you to use wild cards as well as telling it to ignore paths.

And that’s all there is. Just update the array with the paths of the scripts you want to lint, run the gulp jshint command.


There’s other things that you can do to have more control over how the JSHint task runs. For starters, by default, the task won’t stop if there’s an error with one of your files. So if you had chained some tasks together, if the JSHint task encountered an issue with one of your files, it would still continue to run the other tasks. If you want it to quit if it does find a problem, just add the fail reporter to the end of the task, like so.

  .src(['*.js', 'public/js/**/*.js'])

That will force it into an error and break the chain.

Secondly, if you are looking to control what JSHint checks for, you can using a .jshintrc file. By default, the Gulp JSHint package checks for the existence of this file and uses it as its ruleset. If it doesn’t find one, it uses a default ruleset specified by the plugin. This should get created alongside your Gulpfile. I suggest taking a look at Mean.io’s file in the Github project. I find their’s has a good set of rules and works with both Node.js and client side JavaScript pretty well.

Lastly, there are jshint-stylish reporter. It only adds a little extra formatting and more color to the output. With that said, my JSHint task usually looks like this:

gulp.src([ ..files.. ])

Don’t forget that it needs to be installed by running:

npm install jshint-stylish --save-dev

 Wrap Up

This is just the very tip of the iceberg of what can be done using Gulp, or any of the JavaScript task runners for that matter. If you have any questions or comments on JSHint using Gulp, let me know below or hit me up on Twitter.

Update 6/28/2016: Check out my new post on setting up ESLint with Gulp. ESLint gives much more fine control on your linting rule set.