soren: Gulp Sass Error Notify

When I've cocked up Sass, notify me!

Gulp

I'm using Gulp to do Sass stuff. Here's the project directory before I run the Gulp Sass task...

project-root-directory/
      
     index.html
     gulpfile.js
     package.json
     
     css/
         main.scss
         _generic-shared.scss
     
     node_modules/
         gulp
         gulp-sass

...and this is the gulpfile.js code

// required packages: gulp and gulp-sass
var gulp = require('gulp'),
    sass = require('gulp-sass');
    
    // Sass task 
    gulp.task('scss', function() {
        return gulp.src('css/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
    });

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

    // task to run with default command "gulp"  
    gulp.task('default', ['scss', 'watch']);

If you want to know what gruntfile.js is doing, click me.

// Sass task

Get the source (src), my main.scss file (where I keep my .scss imports), Sass it up then save as "main.css" to the dist directory. Files and directories inside the dist directory I upload to the live server. We DON'T edit these files!

// watch for changes task

Watch for changes made to all .scss files and directories inside the css directory. When a .scss file is edited and saved, run the Sass task and keep watching.

// task to run with default command "gulp"

When I type the command gulp in Terminal, run the Sass task followed by the watch task.

Just notify me already!

Right. So we write some CSS/Sass and whoops! We forget a closing curly bracket inside a .scss file

body {
    color: slategrey;

h1, h2, h3, h4, h5, h6 {
    margin-bottom: $base-spacing-unit;
}

We hit SAVE not realising the mistake, Terminal says

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: css/_sass.scss
  6:1  invalid property name
    at ...

It's an error message. It tells us what we need to know. It does the job, but it's no beeping notice!

Hello, gulp-notify!

Install gulp-notify and gulp-plumber

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

Add the packages to gruntfile.js and amend the // Sass task

// gulp, gulp-sass, gulp-notify and gulp-plumber
var gulp = require('gulp'),
    sass = require('gulp-sass');
    notify = require('gulp-notify');
    plumber = require('gulp-plumber');

    // Sass task
    gulp.task('scss', function() {
        var onError = function(err) {
          notify.onError({
            title:    "Gulp Sass",
            subtitle: "You prat! What've you done now?!",
            message:  "Error: <%= error.message="" %="">",
            sound:    "Beep"
          })(err);
          this.emit('end');
        };
        
        return gulp.src('css/main.scss')
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
    });

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

    // tasks to run with default command "gulp"  
    gulp.task('default', ['scss', 'watch']);

Done.

Now, before we correct the "curly bracket" error, let's run the command gulp again.

We're expecting to see an error message in Terminal and a brand new shiny error notification!