Gulp not notifying JS errors and not compiling scss files on running gulp

Question

I've been trying to improve my standard gulpfile to notify when errors occur when compiling scss and JS.

SCSS Issue

I have it working for SCSS, it throws the error in terminal, makes a noise and doesn't stop gulp running - which is great.

Strangely, my styles used to compile when I ran gulp, but now I need to save one of the .scss files to start gulp (again this is good, but I want it to compile on running gulp).

gulp
[12:07:06] Using gulpfile ~PATH/gulpfile.js
[12:07:06] Starting 'scripts'...
[12:07:06] Starting 'watch'...
[12:07:06] Finished 'watch' after 32 ms
[12:07:07] PATH/js/script-dist.js reloaded.
[12:07:07] Finished 'scripts' after 455 ms
[12:07:07] Starting 'default'...
[12:07:07] Finished 'default' after 15 μs

JS Issue

I'm also trying to notify of errors and exactly where they're coming from in for the JS too (and also prevent gulp from stopping when an error occurs). Tried adding gulp-jshint, but it doesn't seem to be working. It flags the error with a noise etc... but doesn't tell me which of the concatenated files the error is located in. It just says:

Error in plugin 'gulp-uglify'

Message:
    [_PATH_]/js/script-dist.js: Unexpected token keyword «var», expected punc «{»
Details:
    fileName: [_PATH_]/js/script-dist.js
    lineNumber: 3

Here is my gulpfile.js

var gulp = require('gulp'); 

// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------

var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var watch = require('gulp-watch');
var livereload = require('gulp-livereload');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');

// --------------------------------------------------------------
// JS
// ---------------------------------------------------------------

gulp.task('scripts', function() {
    return gulp.src(['./js/script.js'])
        .pipe(include())
        .pipe(plumber({errorHandler: errorScripts}))
        .pipe(concat('script-dist.js'))
        //.pipe(stripDebug())
        .pipe(jshint())
        .pipe(uglify())
        .pipe(gulp.dest('./js/'))
        .pipe(livereload());
});

// --------------------------------------------------------------
// Styles
// ---------------------------------------------------------------

gulp.task("styles", function(){
    return gulp.src("./ui/scss/styles.scss")
        .pipe(include())
        .pipe(plumber({errorHandler: errorStyles}))
        .pipe(sass({style: "compressed", noCache: true}))
        .pipe(minifycss())
        .pipe(gulp.dest("./ui/css/"))
        .pipe(livereload());
});


// --------------------------------------------------------------
// Errors
// ---------------------------------------------------------------

// Styles
function errorStyles(error){
    notify.onError({title: "SCSS Error", message: "Check your terminal", sound: "Sosumi"})(error); //Error Notification
    console.log(error.toString()); //Prints Error to Console
    this.emit("end"); //End function
};

// Scripts
function errorScripts(error){
    notify.onError({title: "JS Error", message: "Check your terminal", sound: "Sosumi"})(error); //Error Notification
    console.log(error.toString()); //Prints Error to Console
    this.emit("end"); //End function
};

// --------------------------------------------------------------
// Watch & Reload
// ---------------------------------------------------------------

gulp.task('watch', function() {   
    gulp.watch('./ui/scss/*.scss', ['styles']);
    gulp.watch(['./js/*.js', '!./js/script-dist.js'], ['scripts']);
});

gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);

livereload.listen();

(My JS isn't great, so please bear with me )

Update

I've now managed to plumb a JS error through to terminal, but not sure how to report what the error actually is, which file the error is coming from and which line? Obviously need to replace the console.log with some variables but not sure how to achieve this?

gulp.task('scripts', function() {
    return gulp.src(['./js/script.js'])
        .pipe(include())
        .pipe(plumber(
            //{errorHandler: errorScripts};
            function() {
                console.log('There was an issue compiling scripts');
                this.emit('end');
            }
        ))
        .pipe(concat('script-dist.js'))
        //.pipe(stripDebug())
        //.pipe(jshint())
        .pipe(uglify())
        .pipe(gulp.dest('./js/'))
        .pipe(livereload());
});

Hey! gulp-jshint as a reporter for failure ([Fail](https://github.com/spalger/gulp-jshint#fail-reporter)), gulp-sass [on('error')](https://github.com/spalger/gulp-jshint#fail-reporter) I don't know if it's what you're looking for... — rmjoia, Jan 17 '16 at 13:14
Hey thanks for the reply. So I basically want to report where the error is coming from in the JS. How can I plumb that through so it reports it using `gulp-notify` in terminal? — jx3, Jan 17 '16 at 13:31
So.. after a little dig, I read that is a common use to call this.emit(error.message) on the error callback function. Check this [Thread](http://stackoverflow.com/questions/25108262/error-handling-with-gulp-notify-and-gulp-plumber). Or this article [error handling in gulp](http://hmphry.com/error-handling-in-gulp-js) — rmjoia, Jan 17 '16 at 13:54
How can I send the error object? Do I use console.log(error)? — jx3, Jan 17 '16 at 14:11
.pipe(plumber({ errorHandler: function (error) { console.log(error); this.emit('end'); } })) — rmjoia, Jan 17 '16 at 14:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100892/discussion-between-rmjoia-and-jx3). — rmjoia, Jan 17 '16 at 14:28

score 0 · Answer 1 · answered Jan 18 '16 at 09:03

Styles not running answer:

When running you default task, your styles are not compiled, because you do this:

gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);

Basically what you're doing here is overwriting your default task with a new one.

This can be overcome easily by combining the two:

gulp.task('default', ['scripts', 'styles', 'watch']);

Error notification in console answer:

You should do the jshinting before concatenation, or else you will get error reporing on the concatenated file (script-dist.js). You should change your gulpfile to:

gulp.task('scripts', function() {
    return gulp.src(['./js/script.js'])
        .pipe(include())
        .pipe(plumber(
            //{errorHandler: errorScripts};
            function() {
                console.log('There was an issue compiling scripts');
                this.emit('end');
            }
        ))
        .pipe(jshint())
        .pipe(concat('script-dist.js'))
        .pipe(stripDebug())
        .pipe(uglify())
        .pipe(gulp.dest('./js/'))
        .pipe(livereload());
});

That should do the trick ;-)

Thanks so much, Elger - combining the styles and scripts worked :). Re: the console log. I'm getting that message logged fine, but what I'd like to do is log the actual error and specific file and line that's coming from. Articulated more clearly here: http://stackoverflow.com/questions/34843407/gulp-js-error-notification-not-showing-source-of-error/34843492#34843492 It's to do with uglify not knowing where the error is coming from I think. Although I'm not sure how to actually achieve this? — jx3, Jan 20 '16 at 09:17

Gulp not notifying JS errors and not compiling scss files on running gulp

1 Answers1