gulp js错误通知未显示错误来源 [英] Gulp js error notification not showing source of error

问题描述

一切都已设置好，并且可以连接并编译我的样式和脚本。当发生错误 gulp-notify 和 gulp-plumber 将错误提示为mac通知并在终端中， gulp不会停止运行 - 这是很好的：）

但是，我发现在终端上抛出的脚本错误始终是编译文件的问题 script-dist.js 而不是实际连接的源文件。
$ b 错误

  gulp-notify：[JS错误] _PATH_ / js / script-dist.js：意外的标记关键字«var»，预计punc «{»
插件中的错误'gulp-uglify'
消息：
 _PATH_ / js / script-dist.js：意外的标记关键字«var»，预计的punc«{»
详细信息：
 fileName：_PATH_ / js / script-dist.js 
 lineNumber：3 
  

请注意，这并不告诉我实际的错误来自哪里（应该说它在 _modal.js 中，我故意创建的一个连接文件编辑错误。

gulpfile.js

  var gulp = require（'gulp'）; 
 
 // ---------------------------------------- ---------------------- 
 //插件
 // --------------- ------------------------------------------------ 
 
 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 
 // --------------- ------------------------------------------------ 
 $ b gulp.task（'scripts'，function（）{
 return gulp.src（['./ js / script.js']）
 .pipe（include（）） 
 .pipe（plumber（{errorHandler：errorScripts}））
 .pipe（concat（'script-dist.js'））
 .pipe（uglify（））
。 （gulp.dest（'./ js /'））
 .pipe（livereload（））; 
}）; 
 
 // ---------------------------------------- ---------------------- 
 //样式
 // --------------- ------------------------------------------------ 
 
 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（））; 
}）; 
 
 
 // ------------------------------------ -------------------------- 
 //错误
 // ----------- -------------------------------------------------- -  
 
 //样式
函数errorStyles（错误）{
 notify.onError（{title：Sass Error，message：，sound：Sosumi} ）（错误）; //错误通知
 console.log（error.toString（））; //打印错误到控制台
 this.emit（end）; 
}; 
 
脚本
函数errorScripts错误{
 notify.onError（{title：JS Error，message：，sound：Sosumi}）（错误）; //错误通知
 console.log（error.toString（））; //打印错误到控制台
 this.emit（end）; 
}; 
 
 // ---------------------------------------- ---------------------- 
 // Watch&重新加载$ ​​b $ b // ------------------------------------------- -------------------- 
 
 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（）; 
任务（styles，function（）{
 return gulp.src（./ ui / scss / styles.scss）
 .pipe（include（））
 （$ {$ b $（$ {$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $。 （gulp.dest（./ ui / css /））
 .pipe（livereload（））; 
}）; 
 
 
 // ------------------------------------ -------------------------- 
 //错误
 // ----------- -------------------------------------------------- -  
 
 //样式
函数errorStyles（错误）{
 notify.onError（{title：Sass Error，message：，sound：Sosumi} ）（错误）; //错误通知
 console.log（error.toString（））; //打印错误到控制台
 this.emit（end）; 
}; 
 
脚本
函数errorScripts错误{
 notify.onError（{title：JS Error，message：，sound：Sosumi}）（错误）; //错误通知
 console.log（error.toString（））; //打印错误到控制台
 this.emit（end）; 
}; 
 
 // ---------------------------------------- ---------------------- 
 // Watch&重新加载$ ​​b $ b // ------------------------------------------- -------------------- 
 
 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（）; 
  

解决方案

您 concat 在传递给 uglify 之前，因此就Uglify而言，这里只有一个文件。您可能想要使用例如首先传递文件，确保它们是正确的。

或者，使用 sourcemaps ，这些工具可以利用它来显示原始文件中发生的错误。

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

解决方案

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.

这篇关于gulp js错误通知未显示错误来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！