Gulpは数回後に再洗濯を停止します

Question

私はWes Bosの反応チュートリアルを行っていますが、いくつかのギャルプの再調整の後、作業を​​停止してこのアプリケーション状態で停止します。それは本当にイライラしています。なぜなら、何かがうまくいかないときには、コードやグループが動作しなくなったかどうかをチェックする必要があるからです。

は、ここに私の一気コードです：

var source = require('vinyl-source-stream'); 
var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var watchify = require('watchify'); 
var notify = require('gulp-notify'); 

var stylus = require('gulp-stylus'); 
var autoprefixer = require('gulp-autoprefixer'); 
var uglify = require('gulp-uglify'); 
var rename = require('gulp-rename'); 
var buffer = require('vinyl-buffer'); 

var browserSync = require('browser-sync'); 
var reload = browserSync.reload; 
var historyApiFallback = require('connect-history-api-fallback') 


/* 
    Styles Task 
*/ 

gulp.task('styles',function() { 
    // move over fonts 

    gulp.src('css/fonts/**.*') 
    .pipe(gulp.dest('build/css/fonts')) 

    // Compiles CSS 
    gulp.src('css/style.styl') 
    .pipe(stylus()) 
    .pipe(autoprefixer()) 
    .pipe(gulp.dest('./build/css/')) 
    .pipe(reload({stream:true})) 
}); 

/* 
    Images 
*/ 
gulp.task('images',function(){ 
    gulp.src('css/images/**') 
    .pipe(gulp.dest('./build/css/images')) 
}); 

/* 
    Browser Sync 
*/ 
gulp.task('browser-sync', function() { 
    browserSync({ 
     // we need to disable clicks and forms for when we test multiple rooms 
     server : {}, 
     middleware : [ historyApiFallback() ], 
     ghostMode: false 
    }); 
}); 

function handleErrors() { 
    var args = Array.prototype.slice.call(arguments); 
    notify.onError({ 
    title: 'Compile Error', 
    message: '<%= error.message %>' 
    }).apply(this, args); 
    this.emit('end'); // Keep gulp from hanging on this task 
} 

function buildScript(file, watch) { 
    var props = { 
    entries: ['./scripts/' + file], 
    debug : true, 
    cache: {}, 
    packageCache: {}, 
    transform: [babelify.configure({stage : 0 })] 
    }; 

    // watchify() if watch requested, otherwise run browserify() once 
    var bundler = watch ? watchify(browserify(props)) : browserify(props); 

    function rebundle() { 
    var stream = bundler.bundle(); 
    return stream 
     .on('error', handleErrors) 
     .pipe(source(file)) 
     .pipe(gulp.dest('./build/')) 
     // If you also want to uglify it 
     // .pipe(buffer()) 
     // .pipe(uglify()) 
     // .pipe(rename('app.min.js')) 
     // .pipe(gulp.dest('./build')) 
     .pipe(reload({stream:true})) 
    } 

    // listen for an update and run rebundle 
    bundler.on('update', function() { 
    rebundle(); 
    gutil.log('Rebundle...'); 
    }); 

    // run it once the first time buildScript is called 
    return rebundle(); 
} 

gulp.task('scripts', function() { 
    return buildScript('main.js', false); // this will run once because we set watch to false 
}); 

// run 'scripts' task first, then watch for future changes 
gulp.task('default', ['images','styles','scripts','browser-sync'], function() { 
    gulp.watch('css/**/*', ['styles']); // gulp watch for stylus changes 
    return buildScript('main.js', true); // browserify watch for JS changes 
}); 

Answer 1

エラーが継続するアプリを教えてくれない引くためです。エラーを検出してプロセスを停止させないようにするには、gulp-plumberのようなプラグインを使用します。ビルドプロセスで、次の1本のパイプ

ファーストを追加することにより、

使用gulp-plumber、gulp-plumberプラグインが必要です。そして、

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

を、あなたの一気のタスクにこのコードを追加します（理想的には、あなたの.src()後機能）

.pipe(plumber({ 
    errorHandler: function (err) { 
    console.log(err); 
    this.emit('end'); 
    } 
})) 

Answer 2

は、コールバックを作成します

gulp.task('styles',function(cb) { 
    // move over fonts 

    gulp.src('css/fonts/**.*') 
    .pipe(gulp.dest('build/css/fonts')) 

    // Compiles CSS 
    gulp.src('css/style.styl') 
    .pipe(stylus()) 
    .pipe(autoprefixer()) 
    .pipe(gulp.dest('./build/css/'), cb()); 
}); 

このタスクは、私はそれはそれは変化を見ているように、それはまだ見えますが、私は保存した場合、それはrebundleていないため、ということだかはわからない