Question

我一直在努力改进我的标准gulpfile，以便在编译scss和JS时发生错误时通知。

SCSS问题

我让它适用于SCSS，它会在终端中抛出错误，产生噪音并且不会阻止gulp运行 - 这很好。

奇怪的是，当我运行gulp时，我的样式用于编译，但是现在我需要保存一个.scss文件来启动gulp（再次这很好，但我希望它在运行{{}时进行编译1}}）。

gulp

JS问题

我也试图通知错误以及他们来自JS的确切位置（并且还防止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，但它似乎没有起作用。它用噪声等标记错误......但是没有告诉我错误位于哪个连接文件中。它只是说：

gulp-jshint

这是我的gulpfile.js

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

（我的JS不太好，所以请耐心等待我）

更新

我现在设法将JS错误传递给终端，但不知道如何报告错误实际是什么，错误来自哪个文件以及哪一行？显然需要用一些变量替换console.log但不知道如何实现这个？

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

Answer 1

样式未运行答案：

在运行default任务时，您的样式不会被编译，因为您执行此操作：

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

基本上你在这里做的是用新的任务覆盖你的default任务。

这可以通过将两者结合起来轻松克服：

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

控制台答案中的错误通知：

您应该在连接之前进行jshinting，否则您将在连接文件（script-dist.js）上获得错误修复。您应该将gulpfile更改为：

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

应该这样做; - ）

Gulp没有通知JS错误，也没有在运行gulp时编译scss文件

1 个答案: