首页 > 解决方案 > gulp 函数如何知道它内部调用的函数已经完成?

问题描述

我正在编写一个 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。

标签: javascriptgulp

解决方案


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

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, ...)

推荐阅读