Gulp js error notification not showing source of error

Everything is setup and working to concatenate and compile my styles and scripts. When an error occurs gulp-notify and gulp-plumber throw the error up as a mac notification and in terminal, and gulp doesn't stop running - which is great :)

However, I'm finding that the script errors that are thrown up in terminal are always problems with the compiled file script-dist.js instead of the actual concatenated source file.

Error

gulp-notify: [JS Error] _PATH_/js/script-dist.js: Unexpected token keyword «var», expected punc «{»
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

Notice how this doesn't tell me where the actual error is coming from (it should say it's in _modal.js, one of the concatenated files I deliberately created an error in.

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(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: "Sass Error", message: "", sound: "Sosumi"})(error); //Error Notification
    console.log(error.toString()); // Prints Error to Console
    this.emit("end");
};

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

// --------------------------------------------------------------
// 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();
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: "Sass Error", message: "", sound: "Sosumi"})(error); //Error Notification
        console.log(error.toString()); // Prints Error to Console
        this.emit("end");
    };

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

    // --------------------------------------------------------------
    // 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();

Answers:

Answer

You concat before passing to uglify, so as far as Uglify is concerned, there's only a single file there. You may want to use e.g. a linter to pass over the files first, making sure they're right.

Alternatively, use sourcemaps, which tools may take advantage of to show the original file the error occurred in.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.