Gulp任务不同步工作

Gulp tasks not working in sync

本文关键字：工作 同步 任务 Gulp      更新时间：2023-09-26

我正试图在我的项目中使用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会通知gullow它已经完成了（它完成得很快，大约10毫秒），而不是。然后js-min移动旧文件。这样的观察似乎是有效的，因为我总是落后一个变化。

我能做什么？

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

  1. 你有所有同步的东西要在任务中执行：

     gulp.task('task-a', function(){
   // do sync stuff
   // you may return here
   // but because everything is sync Gulp assumes that everything has ended
 });

  2. 你得到的回调作为输入

    // the passed cb is the next task to execute
gulp.task('task-b', function(cb){
  // do async stuff
  cb( result );
});

  3. 返回承诺/流（适合您的情况）：

    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']);
相关文章：