node.js - 依次执行任务，从而在Gulp 4中动态创建文件

我最近已经从使用Gulp 3迁移到Gulp4。引入诸如gulp.src()和gulp.parallel()之类的新任务可以增加灵活性和易用性。
这是我的代码，试图按顺序执行任务。

动态创建文件的异步任务

let css_purge_libs = async () => {
var pacs = ["!bootstrap", "bulma", "animate.css"];
var paths = await fetch_resources(pacs, "bower", "css|sass");
return gulp.src(paths)
  .pipe(before(true, config.css.destination.temp + "/lib")())
  .pipe(P.if(/\.sass$/gm, P.sass().on('error', P.sass.logError)))
  .pipe(P.purgecss(config.css.purgecss))
  .pipe(gulp.dest(config.css.destination.temp + "/lib"));
};

wrote above code in order to fetch .css or .sass files from bower specific packages which there was no mentioned of main property in bower.json(don't need an additional plugin like wiredep). files will be created on the fly in temp folder.

Building, concat and sourcemap generation

let css_build = () => {
let paths = [`${config.css.destination.temp}/**/*.css`, `${config.css.destination.dev}**/*.css`];
return gulp.src(paths)
  .pipe(before(true, config.css.destination.build)())
  .pipe(P.postcss(config.css.postcss.plugins))
  .pipe(P.if(prod, P.sourcemaps.init()))
  .pipe(P.if(prod, P.cssnano()))
  .pipe(P.if(prod, P.concat("ariyana-build.css")))
  .pipe(P.if(prod, P.rev()))
  .pipe(P.if(prod, P.sourcemaps.write(".")))
  .pipe(gulp.dest(config.css.destination.build));
}

fetched resources and project resources will be sent through a stream for processing.

Gulp task definitions

gulp.task('css:purge-libs', css_purge_libs);
gulp.task('css:build', css_build);
gulp.task("serve:dev", gulp.series(css_purge_libs, css_build, serve_dev));

Problem Scenario

When i issue gulp serve:dev, what happens is attached in below logs.

[00:19:19] Using gulpfile D:\Enterprise\test\gulpfile.js
[00:19:19] Starting 'serve:dev'...
[00:19:19] Starting 'css_purge_libs'...
[00:19:21] Finished 'css_purge_libs' after 1.86 s
[00:19:21] Starting 'css_build'...
[00:19:25] bower_components\bulma\bulma.sass
[00:19:25] app\styles\bootstrap-reboot.css
[00:19:25] bower_components\animate.css\animate.css
[00:19:26] app\styles\main.css
[00:19:26] Finished 'css_build' after 4.69 s
[00:19:26] Starting 'serve_dev'...
[00:19:26] Finished 'serve_dev' after 1.57 ms
[00:19:26] Finished 'serve:dev' after 6.57 s

看起来gulp没有在.tmp/styles/lib css资源中拾取动态创建的文件。我想出什么原因发生了，因为IO op发生在引擎盖下可能是异步ops，因此gulp无法知道op是否完成

回答方案

let sloop = ()=> {
  return new Promise(resolve=> {
    setTimeout(resolve, 2000);
  });
}

当我增加一个星期的时间，这会带来延迟并在任务定义中引入

gulp.task('css:purge-libs', css_purge_libs);
gulp.task('css:build', css_build);
gulp.task("serve:dev", gulp.series(css_purge_libs, sloop, css_build, serve_dev));

这是我期望的输出日志。

[00:28:58] Using gulpfile D:\Enterprise\test\gulpfile.js
[00:28:58] Starting 'serve:dev'...
[00:28:58] Starting 'css_purge_libs'...
[00:29:00] Finished 'css_purge_libs' after 1.8 s
[00:29:00] Starting 'sloop'...
[00:29:00] bower_components\bulma\bulma.sass
[00:29:00] bower_components\animate.css\animate.css
[00:29:02] Finished 'sloop' after 2.18 s
[00:29:02] Starting 'css_build'...
[00:29:08] .tmp\styles\lib\animate.css
[00:29:08] .tmp\styles\lib\bulma.css
[00:29:08] app\styles\bootstrap-reboot.css
[00:29:08] app\styles\main.css
[00:29:08] Finished 'css_build' after 6.43 s
[00:29:08] Starting 'serve_dev'...
[00:29:08] Finished 'serve_dev' after 2.96 ms
[00:29:08] Finished 'serve:dev' after 10 s

在异步操作之间引入新的延迟解决了我的问题

问题

为什么会发生这种情况？（请给我深入的解释，因为我正在搜索内部结构）
为什么gulp流无法轮询文件是否已完成创建。
有没有更好的方法来处理这种情况？

最佳答案

不幸的是，这是gulp中的一个已知问题，没有解决方法：https://github.com/gulpjs/gulp/issues/1421

您从任务中返回的内容告诉gulp如何等待：您可以返回一个Stream（gulp等待它完成），或一个Promise（gulp等待它解决），等等。您尝试执行的操作无法执行做的，是返回一个流的承诺。

目前的解决方案是手动等待gulp流在异步函数中结束，如下所示：

let myTask = async () => {
    let files = await getFilePaths();
    return new Promise((resolve, reject) => {
        return gulp.src(files)
            .pipe(gulp.dest('someplace'))
            .on('end', resolve)
            .on('error', reject);
    });
};

这很丑陋，但是目前还没有更好的方法可以在单个任务中同时进行标准异步调用和流管理。

关于node.js - 依次执行任务，从而在Gulp 4中动态创建文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53936330/