在继续下一个任务之前使 gulp 同步写入文件

Question

gulpfile.js

gulp.task('browser-bundle', ['react'], function() {
...

});


gulp.task('react', function(){
  gulp.src(options.JSX_SOURCE)
      .pipe(react())
      .pipe(gulp.dest(options.JSX_DEST))
});

如您所见，我有浏览器捆绑任务，具体取决于反应任务。我相信这可以按预期工作，因为在输出中我看到了：

[gulp] Running 'react'...
[gulp] Finished 'react' in 3.43 ms
[gulp] Running 'browser-bundle'...

然而，虽然 react 任务已经完成，但它应该写入操作系统的文件还没有完全到位。我注意到，如果我在浏览器捆绑命令中添加了一个 sleep 语句，那么它会按预期工作，但这对我来说似乎有点 hacky。

如果我希望在文件（来自 gulp.dest）被同步写入磁盘之前不认为反应任务完成，我该怎么做？

Answer 1

你需要一个return语句：

gulp.task('react', function(){
    return gulp.src(options.JSX_SOURCE)
        .pipe(react())
        .pipe(gulp.dest(options.JSX_DEST))
});

这样，我的所有写操作都在下一个任务处理之前完成。

Answer 2

回到 2019 年：如果有人带着类似的问题来到这里

至少在 gulp 4.* 中，gulp 等待 promise 解决但忽略结果。 所以...如果您使用异步等待模式并返回gulp.src('...') 的结果，您会感到惊讶。任务在继续之前不等待流完成！可能导致严重错误和时间浪费的事情。解决办法是"promisify"gulp.src

示例：

gulp.task( async function notWaitingTask(){
   // the return stream are ignored because function return promise not stream
   return gulp.src('file.js')
     .pipe(gulp.dest('new-location'))

})

gulp.task( async function waitingTask(){
   // the return stream are respect

   await promisifyStream(
     gulp.src('file.js')
      .pipe(gulp.dest('new-location'))
   )

})

function promisifyStream(stream) {
    return new Promise( res => stream.on('end',res));
}

Answer 3

接受的答案是正确的，但是根据https://github.com/gulpjs/gulp/issues/899，在 gulp 的 3.x 分支中，如果没有一点额外的特殊调味料，您将无法使用依赖项来做到这一点：

var run = require('run-sequence');
var nodeunit = require('gulp-nodeunit');
var babel = require('gulp-babel');
var gulp = require('gulp');

/// Explicitly run items in order
gulp.task('default', function(callback) {
  run('scripts', 'tests', callback);
});

/// Run tests
gulp.task('tests', function() {
  return gulp.src('./build/**/*.tests.js').pipe(nodeunit());
});

// Compile ES6 scripts using bable
gulp.task('scripts', function() {
  return gulp.src('./src/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('./build'));
});

请特别注意使用“运行序列”模块来强制任务一个接一个地运行。

（如果不运行，rm -rf build && gulp 将导致OK: 0 assertions (0ms)，因为tests 任务将找不到由scripts 任务创建的文件，因为它在scripts 任务完全解决之前启动）

Answer 4

在这里遇到同样的问题。假设有 2 个任务，第一个和第二个。在第一之后第二次运行。 第一个任务生成一些文件，供第二个任务读取。使用依赖并不能确保第二个任务可以找到生成的文件。

我必须在管道上显式使用 done 回调，以让 Second 仅在 First 真正完成后才开始。

//This approach works!
gulp.task('First', function(done)) {
   var subFolders = fs.readdirSync(somefolder)...
   var tasksForFolders = subFolders.map(function(folder) {
       return gulp.src('folder/**/*').sthtogeneratefiles();
   });
   tasksForFolders[tasksForFolders.length-1].on('end',done);
   return tasksForFolders;
}

gulp.task('Second', ['First'],function() {
    return gulp.src('generatedfolders/**/*').doth();
}

如果没有done 技巧，Second 永远不会找到 First 生成的文件。下面是我尝试过的，第二个任务可以找到手动调用gulp First生成的文件，然后再调用gulp Second。

//This is the WRONG approach, just for demonstration!!
gulp.task('First', function()) {
   var subFolders = fs.readdirSync(somefolder)...
   var tasksForFolders = subFolders.map(function(folder) {
       return gulp.src('folder/**/*').sthtogeneratefiles();
   });
   return tasksForFolders;
}

gulp.task('Second', function() {
    return gulp.src('generatedfolders/**/*').doth();
}