System notifcation in Gulp using Notify and Plumber

A bugbear when I first started using Gulp instead of using Compass for compiling my stylesheets. Was Gulp would just crashed and you had to restart gulp to get it back running. In this guide i’m going to show you how to prevent this along side showing a system notification for when it errors and when the code compiled.

I’m going to assume you are already have Gulp and node installed on your machine. I’m currently using a window 8.1 machine. I’ve checked over the documentation and this works in Windows operating systems above 8 and should work on Mac. Linux fans i’m not to sure has I couldn’t find any mention of linux.

Create gulpfile.js and package.json

From the root of your project folder create both a gulpfile.js and package.json file. Inside the package.json add the following:

{

}

Pulling in the Gulp plugins

To demonstrate the errors i’m also going to be pulling a gulp-sass also. From the root folder of your application. Enter the following into your command line.

npm install gulp gulp-sass gulp-plumber gulp-notify --save-dev

Open up the gulpfile.js now we will going to pull in and assign the gulp plugins to variables.

var gulp            = require('gulp'),
    sass            = require('gulp-sass'),   
    plumber         = require('gulp-plumber'),
    notify          = require("gulp-notify");
}

Creating an error notification

We now going to create the error notification and assigning a variable called onError. The first thing we do is create a notify box. In the notification dialog box we set the title to Gulp Task Error and we prompt the user to refer to the cmd line for when errors occurs.

We then print the error to cmd line using console.log. We then close the notification using this.emit(‘end’) command.

var onError = function (err) {
    notify({
         title: 'Gulp Task Error',
         message: 'Check the console.'
     }).write(err);

     console.log(err.toString());
     
     this.emit('end');
}

Creating the task runner

The following task runner is basic compile sass script. So we can focus on plumber and notify packages. The pipe(plumber({ errorHandle: onError })) line. If there any errors in our stylesheet they are getting passed to the onError variable. Which we created in the previous step. In our script we have set errors to to go to the console.

After the css is compiled we then show the error notification panel if there is any compilation errors. If no errors we then place the compiled css in the destination folder. Finally we create a another gulp notification which just informs us that the css as been compiled.

gulp.task('sass', function (){
    return gulp.src('./scss/**/*.scss')
    .pipe(plumber({ errorHandle: onError }))
    .pipe(sass())
    .on('error', onError)
    .pipe(gulp.dest('./css'))
    .pipe(notify({
        title   : 'Gulp Task Complete',
        message : 'Styles have been compiled'
    }));
});

Watching the css

I’ve also added the watch command, so gulp will run the sass task if it notices any changes in the scss files.

gulp.task('watch', function() {
    gulp.watch(['./scss/**/*.scss'], ['sass']);
});

Back to the command line

From the command line type in gulp watch. This will now watch for changes on scss files and run the sass task.

 gulp watch

Final Thoughts

The beauty of of using Plumber if you have any css errors. Gulp doesn’t terminate you can fix the errors and gulp will continue running. I would recommend integrating notify into your other gulp task on my own projects I use it for Javascript and images tasks also.

Source code