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任务时，一切正常。因此，我认为问题在于，在copyPath函数结束之前，将copy_sass函数视为已完成，然后在复制路径之前启动css_build。

我期望的是getcss任务在启动css_build之前要等到copy_sass函数和其中的copyPath函数完成。

Answer 1

节点库以多种方式处理异步。

Gulp文件流（通常以src()开头）是异步工作的。这意味着，它们开始某种工作，但是在被调用时立即返回。这就是为什么您总是需要从任务返回流的原因，以便Gulp知道任务的实际工作何时完成，就像您在Gulp documentation中所读到的：

当从任务返回流，承诺，事件发射器，子进程或可观察对象时，成功或错误将通知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, ...)

gulp函数如何知道内部调用的函数已完成？

1 个答案: