Создание gulp записи файлов синхронно, прежде чем перейти к следующей задаче

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'...

Однако, несмотря на завершение реакции, файлы, которые предполагается записать в операционную систему, еще не совсем там. Я заметил, что если я поставлю оператор сна в команде пула браузеров, то он работает так, как ожидалось, однако это кажется мне немного взломанным.

Если я хочу, чтобы ответная задача не считалась законченной, пока файлы (из gulp.dest) не были синхронно записаны на диск, как бы я это сделал?

Ответ 1

Вам нужен оператор return:

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

При этом все мои операции записи выполняются до обработки следующей задачи.

Ответ 2

Принятый ответ находится на месте, но согласно https://github.com/gulpjs/gulp/issues/899, в ветке 3.x gulp, вы не можете сделать это с зависимостями без лишнего особого соуса:

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'));
});

Обратите внимание, в частности, на использование модуля "run-sequence", чтобы заставить задачи запускать один за другим.

(Без запуска rm -rf build && gulp приведет к OK: 0 assertions (0ms), потому что задача tests не найдет файлы, созданные заданием scripts, потому что она начинается до того, как задача scripts полностью решена)

Ответ 3

Встречается такая же проблема. Скажем, есть две задачи: Первая и Вторая. Второе работает после Первого. Первая задача генерирует некоторые файлы, которые должны быть прочитаны второй задачей. Использование зависимости не гарантирует, что вторая задача может найти созданные файлы.

Мне нужно явно использовать обратный вызов done для конвейера, чтобы позволить Second only запускаться только после первого выполнения.

//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();
}

Ответ 4

вернуться к 2019 году: если кто-то придет сюда с похожей проблемой

В gulp 4. *, по крайней мере, gulp ждет ожидания разрешения, но игнорирует результат, так что... если вы используете шаблон асинхронного ожидания и повторно получаете результат gulp.src('...'), вы получите сюрприз. задача не дождаться окончания потока прежде чем продолжить! что-то, что может привести к серьезной ошибке и талии времени. решение - "promisify" gulp.src

пример:


gulp.task( async function notWaitingTask(){
   // the return stream are ignored
   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));
}