Question

我最近已从使用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"));
};

编写上面的代码是为了从Bower特定的软件包中获取.css or .sass个文件，而这些文件在main中没有提到bower.json属性（不需要像{{1 }}）。文件将在wiredep文件夹中即时创建。

生成建筑，concat和源地图

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

获取的资源和项目资源将通过流发送进行处理。

Gulp任务定义

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

问题场景

当我发出temp时，发生的情况会附在下面的日志中。

gulp serve:dev

看起来gulp没有在[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 CSS资源中拾取动态创建的文件。我认为发生这种情况的原因是因为IO op发生在引擎盖下可能是异步ops，所以gulp不知道op是否完成

答案方案

.tmp/styles/lib

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

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

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

问题

为什么会这样？（请给我深入的解释，因为我正在寻找内部零件）
为什么gulp流无法轮询文件是否已创建。
有没有更好的方法来处理这种情况？

Answer 1

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

您从任务中返回的内容告诉gulp如何等待：您可以返回一个Stream（gulp等待它完成），或一个Promise（gulp等待它解决），等等。不能< / em>就像您尝试做的那样，是返回流的承诺。

目前的解决方案是手动等待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); }); };

这很丑陋，但目前尚没有更好的方法在单个任务中同时进行和标准流调用。

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

1 个答案: