在生成输出文件之前完成 Gulp 任务答案

【问题标题】：Gulp task finished before the output files are generated在生成输出文件之前完成 Gulp 任务
【发布时间】：2016-12-22 05:38:32
【问题描述】：

---- 顶部更新 ------

有些朋友指出我应该从任务中返回流。没错，但无济于事。

事实上，在我的第一个版本中，我返回了流，var rs 部分曾经是 return。

问题是，编译好的js文件是在任务完成后生成的。所以无论我使用done回调，还是从task返回stream，任务真的完成了，下一个任务开始了，但是生成的文件还没有准备好。

----这是原始问题----

我有一个gulpfile.js，首先将一堆.ts文件编译成js，然后通过webpack打包输出的js文件。这是我的 gulpfile.js 的重要部分：

const gulp = require("gulp");
const ts = require("gulp-typescript");
const webpack = require("webpack-stream");

gulp.task("default", ["build"]);
gulp.task("build", ["compile", "pack"]);
gulp.task("compile", task_compile);
gulp.task("pack", ["compile"], task_pack);

function task_compile(done) {
    return util_compile_ts("main", done);
}

function task_pack(done) {
    return util_pack_js("main", done);
}

function util_compile_ts(proj, done) {
    const dirSrc = "src/" + proj;
    const dirCompiled = "out/compiled/" + proj;
    const dirBuilt = "out/built";

    var tscfg = require("./" + dirSrc + "/tsconfig.json").compilerOptions;
    var rs = gulp
        .src(dirSrc + "/**/*.ts")
        .pipe(ts(tscfg))
        .pipe(gulp.dest(dirCompiled))
        .on("end", done);
}

function util_pack_js(proj, done) {
    const dirSrc = "src/" + proj;
    const dirCompiled = "out/compiled/" + proj;
    const dirBuilt = "out/built";

    var wpcfg = require("./" + dirSrc + "/webpack.config.js");
    wpcfg.context = path.resolve(dirSrc, wpcfg.context)
    wpcfg.output.path = path.resolve(dirSrc, wpcfg.output.path)
    var rs = gulp
        .src(dirCompiled + "/**/*.js")
        .pipe(webpack(wpcfg))
        .pipe(gulp.dest(dirBuilt))
        .on("end", done);
}

如果我运行gulp compile，然后运行gulp pack，没问题。但是当我只运行gulp 时，就会发生错误：

Error: Entry module not found: Error: Cannot resolve 'file' or 'directory'

并且列出了编译好的js文件的路径，路径本身是可以的，但是没有复制到compiled文件夹中。

我观察了ts编译的过程，发现， ts任务在实际生成输出文件之前完成。运行gulp compile时，gulp任务显示完成，1或2秒后，生成的文件出现在compiled文件夹中。 p>

所以当我运行gulp 时，pack 任务将在compile 任务完成后立即启动，那时 js 输出还没有准备好在磁盘上，所以pack 任务失败了，因为它可以' t 找到输入。

那么问题来了，我怎么能等待编译好的 js 文件准备好继续下一个任务呢？

附：我不想使用 setTimeout 进行硬编码等待......

谢谢，安德斯

【问题讨论】：

感谢您的回复，但这不是问题所在。事实上，在我的第一个版本中，我已经返回了流，var rs 部分曾经是return。但它没有帮助，文件是在任务完成后生成的。

标签： typescript gulp webpack

【解决方案1】：

根据documentation for gulp-typescript 返回的ts 流不是您的JavaScript 文件。它是.js 和.d.ts 的组合。参考TypeScripts exampels 看看他们如何选择流中的 JavaScript 文件。

尝试通过选择 JavaScript 文件来更改您的流流程，并进一步返回流以让 gulp 为您处理完成的回调。

function util_compile_ts(proj, done) {
  const dirSrc = "src/" + proj;
  const dirCompiled = "out/compiled/" + proj;
  const dirBuilt = "out/built";

  var tscfg = require("./" + dirSrc + "/tsconfig.json").compilerOptions;
  return gulp
    .src(dirSrc + "/**/*.ts")
    .pipe(ts(tscfg))
    .js
    .pipe(gulp.dest(dirCompiled));
}

【讨论】：