Notify pop up

Learning Gulp : part 10 of 22 published on Aug 10, 2015

In the previous section, we used gulp to validate our JavaScript. The error message would appear in the console. While this is awesome, there is a chance we could miss it.

Let’s use notifications to display a pop up window when we have a JavaScript error.

There is a gulp plugin to send notifications. True story.

$ npm install gulp-notify --save-dev

Remember that gulp uses node’s streaming. It shouldn’t be a surprise that when gulp-jsvalidate finds an error, it emits an error event.

All we need to do is handle the event and use gulp-notify to send a notification with the error message.

// gulpfile.js
...
var notify = require('gulp-notify');
...

...
gulp.task('javascript', function () {
  console.log("Validate JavaScript");
  return gulp.src("contents/javascripts/**.js")
      .pipe(jsValidate())
      .on("error", notify.onError(function(error) {
        return error.message;
      }));
});
...

Since our JavaScript is now valid, we need to make it invalid so we can see the error message.

// /contests/javascript/somejs.js
function OMG() {
  var x * 2;
  return x + 10;
}

Now when we run gulp javascript we will get a notification window that an error was found.

$ gulp javascript
Using gulpfile ~/YOUR_DIRECTORY/gulpFile.js
Starting 'javascript'...
Validate JavaScript
gulp-notify: [Error running Gulp] Line 3: Unexpected token *
'javascript' errored after 41 ms Line 3: Unexpected token *
Next: Uglify