【问题标题】:Gulp js error notification not showing source of errorGulp js错误通知未显示错误来源
【发布时间】:2016-01-17 20:40:36
【问题描述】:

一切都已设置并正在连接和编译我的样式和脚本。当 gulp-notifygulp-plumber 发生错误时,将错误作为 mac 通知和终端抛出,并且 gulp 不会停止运行 - 这很棒:)

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

错误

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

请注意,这并没有告诉我实际错误来自哪里(应该说它在 _modal.js 中,这是我故意在其中创建错误的串联文件之一。

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

【问题讨论】:

    标签: javascript gulp gulp-concat gulp-uglify


    【解决方案1】:

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

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

    【讨论】:

    • 啊,好的,谢谢你,Félix。这就说得通了。我只是不确定如何实现这一点,因为我的 JS 知识并没有那么远:)
    • 幸运的是,gulp 有一堆recipes,这让一切变得更容易:)
    猜你喜欢
    • 1970-01-01
    • 2013-01-30
    • 1970-01-01
    • 2015-10-04
    • 2022-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-19
    相关资源
    最近更新 更多