Question

我试图在我的项目中使用browserify和babelify。除了同步问题外，一切都很好。

// Browserify
//---------------------------------------------------
gulp.task('browserify', function() {
    var bundler = browserify('_babel/script.js').transform(babelify);

    bundler.bundle()
        .pipe(source('_babel/script.js'))
        .pipe(gulp.dest('_dev'));
});

// JavaScript moving and merging
//---------------------------------------------------
gulp.task('js-min', ['browserify'], function() {
    return gulp.src('_dev/_babel/script.js')
        .pipe(concatjs('scripts.js'))
        .pipe(gulp.dest('_js'))
        .pipe(browserSync.stream());
});

gulp.watch('_babel/**', ['js-min']);

从我所知道的情况来看，browserify通知gulp它已经完成（它已经完成了，大约10毫秒左右），当它不是时。然后js-min移动旧文件。这样的观察似乎是有效的，因为我总是在后面改变。

我该怎么办？

Answer 1

有三种方法告诉Gulp任务已经完成。

您可以在任务中执行所有同步操作：

 gulp.task('task-a', function(){
   // do sync stuff

   // you may return here
   // but because everything is sync Gulp assumes that everything has ended
 });

您将回调作为输入

// the passed cb is the next task to execute
gulp.task('task-b', function(cb){

  // do async stuff

  cb( result );
});

返回一个承诺/流（适合您的情况）：

gulp.task('task-c', function(){

  // return either a promise or a stream
  return gulp.src( ... );

}）;

在两种情况下，2和3 Gulp将等待执行结束，然后再调用下一个函数。你基本上是在写一个案例3但是Gulp相信它是1。要解决此问题，只需返回bundler即可，您应该没问题：

// Browserify
//---------------------------------------------------
gulp.task('browserify', function() {
  var bundler = browserify('_babel/script.js').transform(babelify);

  return bundler.bundle()
    .pipe(source('_babel/script.js'))
    .pipe(gulp.dest('_dev'));
});

// JavaScript moving and merging
//---------------------------------------------------
gulp.task('js-min', ['browserify'], function() {
  return gulp.src('_dev/_babel/script.js')
    .pipe(concatjs('scripts.js'))
    .pipe(gulp.dest('_js'))
    .pipe(browserSync.stream());
});

gulp.watch('_babel/**', ['js-min']);

Gulp任务无法同步工作

1 个答案: