JSHint Using Gulp

JSHint Using Gulp

A JavaScript task runner has become a main stay for almost any new project I start. Some people think that runners like Grunt and Gulp are limited to only 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 itself, and gulp-jshint. To do that, just install them from NPM.

This should add gulp and gulp-jshint to your package.json as well as install them to the node_modules 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.

 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‘.

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.

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.

Extras

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.

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 custom reporters that you can use to change the way it outputs the results. You can also create your own if you wanted. I usually use the 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:

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

 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.


 

  • Leland cope

    jshint-stylish fails. You should use jshint-stylish-ex instead.

    • Can you give me more information? What I just now realized that I didn’t put in the post is that you first need to run:

      That should install the package. I’ve never used jshint-stylish-ex.

  • Bob

    I’m trying to use jshint but I never get a report and I haven’t seen anyone talk about creating a field with JSHint feedback in it. My grunt implementation creates a file. Is this possible with gulp?

    • Bob,
      In order to get a report back, you need to specify a reporter. After looking at it now, that wasn’t entirely clear in the article. The first code sample under the ‘Extras’ section is what you’re looking for.

      As for exporting it to a file, there’s plenty of Gulp plugins that will do what you need. Just with a quick search, I came up with: https://www.npmjs.com/package/gulp-jshint-file-reporter.

      Just integrate that into your task and you should be able to get a file report.

      Thanks for the question!

      • Bob

        That makes complete sense. I tried gulp-jshint-file-reporter and that did ok. Not very formatted but now that I know how this works I’ll look for something I like. Thanks and great article.

        • Glad I could help. I haven’t personally used that plugin so I can give you to much insight into it. I’m sure there’s others that will help.

          I’m curious, what do you do with that file? I’ve always just wrote it to the console.

  • Calvin

    Your main text font color is too light. So hard to read.

    • Sorry about that. I tweaked it so it’s not as light. Let me know if it helps.

      • Calvin

        Thanks for the fast turn around. It’s better now!

        • Awesome! I never really noticed as it may depend on monitor, but I’m sure you weren’t the only one having the same problem. Thanks for pointing it out.

  • Vasan j.s

    Great article, pretty lucid and precise, thanks a heap!!!