ฉันกำลังใช้อึก 3.6.2 และมีงานต่อไปนี้ที่ตั้งค่าจากตัวอย่างออนไลน์

gulp.task('watch', ['default'], function () {
  gulp.watch([
    'views/**/*.html',        
    'public/**/*.js',
    'public/**/*.css'        
  ], function (event) {
    return gulp.src(event.path)
      .pipe(refresh(lrserver));
  });

  gulp.watch(['./app/**/*.coffee'],['scripts']);
  gulp.watch('./app/**/*.scss',['scss']);
});

เมื่อใดก็ตามที่มีข้อผิดพลาดในนาฬิกา Coffee gulp หยุด - เห็นได้ชัดว่าไม่ใช่สิ่งที่ฉันต้องการ

ตามที่แนะนำที่อื่นฉันลองทำ

gulp.watch(['./app/**/*.coffee'],['scripts']).on('error', swallowError);
gulp.watch('./app/**/*.scss',['scss']).on('error', swallowError);
function swallowError (error) { error.end(); }

แต่ดูเหมือนจะไม่ทำงาน

ผมทำอะไรผิดหรือเปล่า?

ในการตอบสนองต่อคำตอบของ @ Aperçuฉันได้แก้ไขswallowErrorวิธีการของฉันแล้วลองทำสิ่งต่อไปนี้แทน:

gulp.task('scripts', function () {
  gulp.src('./app/script/*.coffee')
    .pipe(coffee({ bare: true }))
    .pipe(gulp.dest('./public/js'))
    .on('error', swallowError);
});

รีสตาร์ทแล้วสร้างข้อผิดพลาดทางไวยากรณ์ในไฟล์กาแฟของฉัน ปัญหาเดียวกัน:

[gulp] Finished 'scripts' after 306 μs

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: W:\bariokart\app\script\trishell.coffee:5:1: error: unexpected *
*
^
  at Stream.modifyFile (W:\bariokart\node_modules\gulp-coffee\index.js:37:33)
  at Stream.stream.write (W:\bariokart\node_modules\gulp-coffee\node_modules\event-stream\node_modules\through\index.js:26:11)
  at Stream.ondata (stream.js:51:26)
  at Stream.EventEmitter.emit (events.js:95:17)
  at queueData (W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:43:21)
  at next (W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:71:7)
  at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\map-stream\index.js:85:7
  at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\lib\src\bufferFile.js:8:5
  at fs.js:266:14
  at W:\bariokart\node_modules\gulp\node_modules\vinyl-fs\node_modules\graceful-fs\graceful-fs.js:104:5
  at Object.oncomplete (fs.js:107:15)

swallowErrorฟังก์ชั่นของคุณควรมีลักษณะเช่นนี้:

function swallowError (error) {

  // If you want details of the error in the console
  console.log(error.toString())

  this.emit('end')
}

ฉันคิดว่าคุณต้องผูกฟังก์ชั่นนี้ในerrorกรณีที่งานตกหล่นไม่ใช่watchงานเพราะนั่นไม่ใช่ปัญหาที่เกิดขึ้นคุณควรตั้งข้อผิดพลาดในการโทรกลับในแต่ละงานที่อาจล้มเหลวเช่นปลั๊กอินที่แตกเมื่อคุณมี พลาด;หรืออย่างอื่นเพื่อป้องกันไม่ให้watchงานหยุด

ตัวอย่าง :

gulp.task('all', function () {
  gulp.src('./app/script/*.coffee')
    .pipe(coffee({ bare: true }))
    .on('error', swallowError)
    .pipe(gulp.dest('./public/js'))

  gulp.src('css/*.scss')
    .pipe(sass({ compass: true }))
    .on('error', swallowError)
    .pipe(cssmin())
    .pipe(gulp.dest('dist'))
})

อีกทางเลือกหนึ่งหากคุณไม่ต้องการรวมโมดูลอื่นคุณสามารถใช้ฟังก์ชั่นบันทึกของgulp-utilเพื่อป้องกันไม่ให้คุณประกาศฟังก์ชั่นพิเศษในgulpfile:

.on('error', gutil.log)

แต่ฉันอาจแนะนำให้ดูที่ปลั๊กอินอึก - ช่างประปาที่น่ากลัวซึ่งใช้ในการลบonerrorตัวจัดการของerrorเหตุการณ์ที่ทำให้เกิดการแตกของลำธาร มันง่ายมากที่จะใช้งานและมันจะหยุดคุณจากการตรวจจับงานทั้งหมดที่อาจล้มเหลว

gulp.src('./app/script/*.coffee')
  .pipe(plumber())
  .pipe(coffee({ bare: true }))
  .pipe(gulp.dest('./public/js'))

ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ในบทความนี้โดยผู้สร้างปลั๊กอินที่เกี่ยวข้อง

ตัวอย่างข้างต้นไม่ได้ผลสำหรับฉัน แม้ว่าต่อไปนี้:

var plumber = require('gulp-plumber');
var liveReload = require('gulp-livereload');
var gutil = require('gulp-util');
var plumber = require('gulp-plumber');
var compass = require('gulp-compass');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
var notify = require('gulp-notify');

gulp.task('styles', function () {
    //only process main.scss which imports all other required styles - including vendor files.
    return gulp.src('./assets/scss/main.scss')
            .pipe(plumber(function (error) {
                gutil.log(error.message);
                this.emit('end');
            }))
            .pipe(compass({
                config_file: './config.rb',
                css: './css'
                , sass: './assets/scss'
            }))
            //minify files
            .pipe(rename({suffix: '.min'}))
            .pipe(minifycss())

            //output
            .pipe(gulp.dest('./css'))
            .pipe(notify({message: 'Styles task complete'}));
});

gulp.task('watch', function () {
    liveReload.listen();
    gulp.watch('assets/scss/**/*.scss', ['styles']);
});

ด้วยรูปแบบไฟล์เดียว

(เช่น: * .coffee เท่านั้น)

หากคุณต้องการทำงานกับไฟล์เพียงรูปแบบเดียวgulp-plumberนั่นคือทางออกของคุณ

ตัวอย่างเช่นข้อผิดพลาดที่จัดการอย่างสมบูรณ์และคำเตือนสำหรับการบันทึกกาแฟ:

gulp.task('scripts', function() {
  return gulp.src(['assets/scripts/**/*.coffee'])
    .pipe(plumber())
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(lintThreshold(10, 0, lintThresholdHandler))
    .pipe(coffee({
      bare: true
    }))
    .on('error', swallowError)
    .pipe(concat('application.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

ด้วยรูปแบบไฟล์หลายประเภท

(เช่น: * .coffee และ * .js ในเวลาเดียวกัน)

แต่ถ้าคุณจะไม่ทำงานกับรูปแบบไฟล์หลายประเภท (เช่น: *.jsและ*.coffee) กว่าที่ฉันจะโพสต์โซลูชันของฉัน

ฉันจะโพสต์โค้ดอธิบายตนเองที่นี่พร้อมคำอธิบายก่อนหน้านี้

gulp.task('scripts', function() {
  // plumber don't fetch errors inside gulpif(.., coffee(...)) while in watch process
  return gulp.src(['assets/scripts/**/*.js', 'assets/scripts/**/*.coffee'])
    .pipe(plumber())
    .pipe(gulpif(/[.]coffee$/, coffeelint()))
    .pipe(coffeelint.reporter())
    .pipe(lintThreshold(10, 0, lintThresholdHandler))
    .pipe(gulpif(/[.]coffee$/, coffee({ // if some error occurs on this step, plumber won't catch it
      bare: true
    })))
    .on('error', swallowError)
    .pipe(concat('application.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

ฉันประสบปัญหากับgulp-plumberและgulp-ifใช้gulp.watch(...

ดูปัญหาที่เกี่ยวข้องได้ที่นี่: https://github.com/floatdrop/gulp-plumber/issues/23

ดังนั้นตัวเลือกที่ดีที่สุดสำหรับฉันคือ:

• แต่ละส่วนเป็นไฟล์และต่อกันหลังจากนั้น สร้างงานหลายอย่างที่สามารถประมวลผลแต่ละส่วนในไฟล์แยกกัน (เช่นทำเสียงฮึดฮัด) และเชื่อมต่อพวกเขา
• แต่ละส่วนเป็นสตรีมและรวมสตรีมหลังจากนั้น รวมสองสตรีมโดยใช้merge-stream(ที่ทำจากevent-stream) เป็นหนึ่งและดำเนินงานต่อ (ฉันลองใช้ครั้งแรกและทำงานได้ดีสำหรับฉันดังนั้นจึงเป็นโซลูชันที่เร็วกว่ารุ่นก่อนหน้า)

แต่ละส่วนเป็นสตรีมและรวมสตรีมหลังจากนั้น

เธอเป็นส่วนหลักของรหัสของฉัน:

gulp.task('scripts', function() {
  coffeed = gulp.src(['assets/scripts/**/*.coffee'])
    .pipe(plumber())
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(lintThreshold(10, 0, lintThresholdHandler))
    .pipe(coffee({
      bare: true
    }))
    .on('error', swallowError);

  jsfiles = gulp.src(['assets/scripts/**/*.js']);

  return merge([jsfiles, coffeed])
    .pipe(concat('application.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

แต่ละส่วนเป็นไฟล์และต่อกันหลังจากนั้น

หากจะแยกสิ่งนี้ออกเป็นส่วน ๆ ในแต่ละส่วนควรมีไฟล์ผลลัพธ์ที่สร้างขึ้น ตัวอย่างเช่น:

gulp.task('scripts-coffee', function() {

  return gulp.src(['assets/scripts/**/*.coffee'])
    .pipe(plumber())
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(lintThreshold(10, 0, lintThresholdHandler))
    .pipe(coffee({
      bare: true
    }))
    .on('error', swallowError)
    .pipe(concat('application-coffee.js'))
    .pipe(gulp.dest('dist/scripts'));

});

gulp.task('scripts-js', function() {

  return gulp.src(['assets/scripts/**/*.js'])
    .pipe(concat('application-coffee.js'))
    .pipe(gulp.dest('dist/scripts'));

});

gulp.task('scripts', ['scripts-js', 'scripts-coffee'], function() {

  var re = gulp.src([
    'dist/scripts/application-js.js', 'dist/scripts/application-coffee.js'
  ])
    .pipe(concat('application.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
    .pipe(notify({ message: 'Scripts task complete' }));

  del(['dist/scripts/application-js.js', 'dist/scripts/application-coffee.js']);

  return re;

});

PS:

นี่คือโมดูลและฟังก์ชันของโหนดที่ใช้:

// Load plugins
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    plumber = require('gulp-plumber'),
    merge = require('ordered-merge-stream'),
    replace = require('gulp-replace'),
    del = require('del'),
    gulpif = require('gulp-if'),
    gulputil = require('gulp-util'),
    coffee = require('gulp-coffee'),
    coffeelint = require('gulp-coffeelint),
    lintThreshold = require('gulp-coffeelint-threshold');

var lintThresholdHandler = function(numberOfWarnings, numberOfErrors) {
  var msg;
  gulputil.beep();
  msg = 'CoffeeLint failure; see above. Warning count: ';
  msg += numberOfWarnings;
  msg += '. Error count: ' + numberOfErrors + '.';
  gulputil.log(msg);
};
var swallowError = function(err) {
  gulputil.log(err.toString());
  this.emit('end');
};

ฉันชอบที่จะใช้ช่างประปาอึกเพราะมันสามารถเพิ่มฟังทั่วโลกเพื่องานและมีข้อความที่มีความหมายแสดง

var plumber = require('gulp-plumber');

gulp.task('compile-scss', function () {
    gulp.src('scss/main.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cssnano())
        .pipe(gulp.dest('css/'));
});

การอ้างอิง: https://scotch.io/tutorials/prevent-errors-from-crashing-gulp-watch

ฉันใช้แฮ็คต่อไปนี้เป็นวิธีแก้ปัญหาสำหรับhttps://github.com/gulpjs/gulp/issues/71 :

// Workaround for https://github.com/gulpjs/gulp/issues/71
var origSrc = gulp.src;
gulp.src = function () {
    return fixPipe(origSrc.apply(this, arguments));
};
function fixPipe(stream) {
    var origPipe = stream.pipe;
    stream.pipe = function (dest) {
        arguments[0] = dest.on('error', function (error) {
            var state = dest._readableState,
                pipesCount = state.pipesCount,
                pipes = state.pipes;
            if (pipesCount === 1) {
                pipes.emit('error', error);
            } else if (pipesCount > 1) {
                pipes.forEach(function (pipe) {
                    pipe.emit('error', error);
                });
            } else if (dest.listeners('error').length === 1) {
                throw error;
            }
        });
        return fixPipe(origPipe.apply(this, arguments));
    };
    return stream;
}

เพิ่มไปยัง gulpfile.js ของคุณและใช้เช่นนั้น:

gulp.src(src)
    // ...
    .pipe(uglify({compress: {}}))
    .pipe(gulp.dest('./dist'))
    .on('error', function (error) {
        console.error('' + error);
    });

นี่เป็นข้อผิดพลาดที่เป็นธรรมชาติที่สุดสำหรับฉัน หากไม่มีตัวจัดการข้อผิดพลาดเลยก็จะเกิดข้อผิดพลาด ทดสอบกับโหนด v0.11.13

วิธีง่ายๆในการนี้คือการใส่gulp watchวงวนไม่สิ้นสุดภายใน Bash (หรือ sh) เชลล์

while true; do gulp; gulp watch; sleep 1; done

เก็บเอาต์พุตของคำสั่งนี้ไว้ในพื้นที่ที่มองเห็นได้บนหน้าจอของคุณในขณะที่คุณแก้ไข JavaScript เมื่อการแก้ไขของคุณส่งผลให้เกิดข้อผิดพลาดอึกจะผิดพลาดพิมพ์การติดตามสแต็กรอสักครู่แล้วกลับมาดูไฟล์ต้นฉบับของคุณต่อ จากนั้นคุณสามารถแก้ไขข้อผิดพลาดทางไวยากรณ์ได้และ Gulp จะระบุว่าการแก้ไขนั้นประสบความสำเร็จหรือไม่โดยการพิมพ์ผลลัพธ์ปกติหรือหยุดทำงาน (แล้วกลับมาทำงานอีก)

สิ่งนี้จะทำงานในเทอร์มินัล Linux หรือ Mac หากคุณใช้ Windows ให้ใช้ Cygwin หรือ Ubuntu Bash (Windows 10)

สิ่งที่พิมพ์ด้วยพิมพ์ดีด

นี่คือสิ่งที่ได้ผลสำหรับฉัน ผมทำงานกับTypescriptและแยกฟังก์ชัน (ไปสู่ความสับสน aovid กับthisคำหลัก) lessเพื่อจัดการ ใช้งานได้Javascriptดีเช่นกัน

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function() {
    // writing a function to avoid confusion of 'this'
    var l = less({});
    l.on('error', function(err) {
        // *****
        // Handle the error as you like
        // *****
        l.emit('end');
    });

    return gulp
        .src('path/to/.less')
        .pipe(l)
        .pipe(gulp.dest('path/to/css/output/dir'))
})

ตอนนี้เมื่อคุณwatch .lessไฟล์และerrorเกิดขึ้นwatchจะไม่หยุดและการเปลี่ยนแปลงใหม่จะดำเนินการตามของคุณless taskจะไม่หยุดและการเปลี่ยนแปลงใหม่จะประมวลผลตามที่คุณ

หมายเหตุ : ฉันพยายามl.end();; อย่างไรก็ตามมันไม่ทำงาน อย่างไรก็ตามl.emit('end');ทำงานได้อย่างสมบูรณ์

หวังว่าความช่วยเหลือนี้ โชคดี.

สิ่งนี้ใช้ได้กับฉัน ->

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
    setTimeout(function(){
        return gulp.src('sass/*.sass')
        .pipe(sass({indentedSyntax: true}))
        .on('error', console.error.bind(console))
        .pipe(gulp.dest('sass'));
    }, 300);
});



gulp.task('watch', function(){
    gulp.watch('sass/*.sass', ['sass']);
});

gulp.task('default', ['sass', 'watch'])

ฉันเพิ่งเพิ่มบรรทัด. on ('error', console.error.bind (console)) แต่ฉันต้องรันคำสั่ง gulp เป็นรูท ฉันใช้ gulp ของโหนดในแอปพลิเคชัน php ดังนั้นฉันจึงมีหลายบัญชีในเซิร์ฟเวอร์เดียวซึ่งเป็นสาเหตุที่ฉันพบปัญหา gulp ที่ทำให้เกิดข้อผิดพลาดทางไวยากรณ์เนื่องจากฉันไม่ได้ใช้ gulp ในฐานะ root ... อาจเป็นช่างประปาและบางคน คำตอบอื่น ๆ ที่นี่จะได้ผลสำหรับฉันถ้าฉันวิ่งตามราก ให้เครดิตกับรหัส Accio https://www.youtube.com/watch?v=iMR7hq4ABOwสำหรับคำตอบ เขากล่าวว่าการจัดการข้อผิดพลาดจะช่วยให้คุณสามารถระบุว่าข้อผิดพลาดอยู่ที่บรรทัดใดและมีอะไรอยู่ในคอนโซล แต่ยังหยุดอึกจากการผิดพลาดทางไวยากรณ์ เขาบอกว่ามันเป็นการแก้ไขน้ำหนักเบาดังนั้นไม่แน่ใจว่ามันจะทำงานในสิ่งที่คุณกำลังมองหาหรือไม่ แม้ว่าการแก้ไขด่วนคุ้มค่ากับการยิง หวังว่านี่จะช่วยใครซักคน!