Как функция gulp может узнать, что функции, вызываемые внутри нее, завершены?

Question

Я пишу задачу gulp, которая копирует sass-файлы в папку tmp и затем создает css.

function copy_sass(done) {

  var conponments = setup.conponments;
  var sassList = config.conponments.sass;
  var mainPath = config.path.src.sass.main;
  var rootPath = config.path.src.sass.root;
  var source = getPaths(conponments, sassList, mainPath);// get a filtered list of path
  var destination = config.path.tmp.sass_tmp;

  copyPath(mainPath + 'mixin/**', destination + 'main/mixin/');
  copyPath(mainPath + 'settings/**', destination + 'main/settings/');
  copyPath(rootPath + 'style.scss', destination);
  copyPath(source, destination + 'main/conponment/');

  done();
};

function css_build(done) {
  var source = config.path.tmp.sass_tmp + '**/*.scss';
  var destination = config.path.tmp.css.root;

  return src(source)
    .pipe(bulkSass())
    .pipe(sass())
    .pipe(csscomb())
    .pipe(cssbeautify({indent: '  '}))
    .pipe(autoprefixer())
    .pipe(gulp.dest(destination));
  done();
};

function copyPath(source, destination) {
  return src(source)
    .pipe(dest(destination));
};

exports.getcss = series(
  copy_sass,
  css_build
);

exports.filter = filter_tmp_sass;

exports.css = css_build;

Когда я вызываю функции последовательно с задачей getcss, gulp, похоже, не ждетдо того, как задача копирования завершена и css_build ничего не делает, потому что пути еще не скопированы.

Когда я запускаю задачу копирования, а затем задачу css вручную, все работает.Поэтому я думаю, что проблема в том, что функция copy_sass считается завершенной до завершения функций copyPath, а затем запускается css_build до копирования путей.

Я ожидаю, что задача getcss будет ждать до тех пор, покафункция copy_sass и функция copyPath внутри нее завершаются перед запуском css_build.

Answer 1

Библиотеки узлов обрабатывают асинхронность различными способами.

Потоки файлов Gulp (обычно начинающиеся с src()) работают асинхронно.Это означает, что они начинают какую-то работу, но мгновенно возвращаются при вызове.По этой причине вам всегда нужно возвращать поток из задачи, чтобы Gulp знал, когда фактическая работа задачи завершена, как вы можете прочитать в документации Gulp :

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

Что касается вашего конкретного примера,в вашей задаче copy_sass вы звоните copyPath несколько раз.Копирование начато, но методы мгновенно возвращаются, не дожидаясь завершения.После этого обратный вызов done называется сообщением Gulp о том, что задача выполнена.

Чтобы гарантировать завершение задачи, вам необходимо возвращать каждый отдельный поток в Gulp.В вашем примере вы можете создать отдельную задачу для каждой операции копирования и объединить их с помощью series() или даже parallel():

function copyMixin() {
    return src('...').pipe(dest(...))
}

function copySettings() {
    return src('...').pipe(dest(...))
}

// ...

var copySass = parallel(copyMixin, copySettings, ...)