Web Design

Gulp Error Reporting with JShint, Gulp-Notify, and Livereload

Gulp is an npm-based toolkit for automating your workflow.

If you find yourself squinting at a dull console, this quick write-up on adding color-coding, OS notifications, and error reporting to gulp will be a sight for sore eyes.

Damn you kids, I was using Gulp before Gulp was cool! When was that, 2013? I know—I’m a dinosaur. Anyway, back then, Gulp wasn’t as mature as Grunt, but I recently switched back, because now it certainly is. I thought I might share some useful bits from my configuration, to save you time.

Setting up Gulp with functioning error reporting and Livereload was a bit of a hassle. I wanted Gulp to output color-coded error messaging in the console, as well as send a notification to my desktop, for both SASS and jshint, while watching and/or when I run the task manually.

The end result I wanted is this:

And in the console:

First, here’s the package.json:

We need a whole bunch of crap for this to work. You’ll want to npm install all of these first:

Gulp Sass Notifications

Then, load everything up:

Okay, let’s do the SASS error reporting first. Here is a simplified SASS task:

So in this task, we’re compiling all the SASS partials listed out in /styles/sass/screen.scss, and compiling them into the /styles/ folder as screen.css. Notice we start by calling plugins.plumber, and pass errors off to the reportError function.

That function will do the following magic:

I cannot claim credit for this function, but I combed the depths of gulp-notify’s github issues to find the solution. Kudos to @brendanfalkowski. It is basically taking the error and breaking it up into sensible bits to display in the OS notifier. I use Windows 10, so this is the little popup generated by the Notifications tray. I had to add a system environment variable FORCE_COLOR = true to get my console to accept chalk colors, so your mileage may vary.

Just click New and add FORCE_COLOR with a value of true, in Windows 10.

What’s great about this function is that you can use it in other tasks, and it will handle the popup. For example, in my cssmin task, I use plumber to pass the error to the same error reporting function:

Notice the currentTask variable. In @brendanfalkowski‘s original function, error.plugin isn’t always available in a task’s error output, so if you specify the name of the task inside each task, this guarantees the notify popup will always specify which task is failing.

OK! Now we just need to hook this up with our watch task.

Make sure to install the Chrome Livereload extension and turn it on by clicking the below icon (after running gulp watch) when you’re ready to watch a page in your browser:

JSHint Notifications

For jshint we’ll need a slightly different error function. Let’s start with our task:

We set up jshint and jshint stylish first, then pipe the error to notify, which in turn uses our error function. This function I cribbed and modified from the following gist:

Now we just need to add this to our watch task:

Ta da! Now you have sass and jshint notifications. Congrats. Go make lots of errors.

Also in Web Design

Post a Comment

Your Two Cents


Your Comments

0 Replies & Counting

There are no comments yet.