时间戳

首页 > 解决方案 > 合并的 gulp 任务永远不会触发 `end` 事件

javascript - 合并的 gulp 任务永远不会触发 `end` 事件

问题描述

我有一个 gulp 任务，它遍历一个文件夹以查找子文件夹并根据每个文件夹的内容输出一个 JavaScript 文件。下面是一个更直观的例子。

变成：

这是通过读取目录的内容，然后对每个文件夹（ , , , ）src/assets/scripts运行循环并将每个文件夹的内容发送到 Gulp 任务来实现的，这些任务与merge-stream合并在一起。criticallegacymodernservice-worker

所有这一切都很好，除了一旦任务重新合并在一起，我想在编译成功时触发通知。如果我尝试将任何内容通过管道传输到合并的流，它就不起作用。它只是返回合并的流，并且永远不会继续。

如果我不承诺我的PROCESS_SCRIPTS功能并且不使用合并流（即只处理一个手动指定的文件夹），它工作正常，所以我不知道发生了什么。

这是我的全部任务：

module.exports = {
    scripts(gulp, plugins, ran_tasks, on_error) {
        // task-specific plugins
        const ESLINT  = require("gulp-eslint");
        const WEBPACK = require("webpack-stream");

        // process scripts
        const PROCESS_SCRIPTS = (js_directory, destination_file_name = "modern.js", compare_file_name = "modern.js", source = [global.settings.paths.src + "/assets/scripts/*.js"]) => {
            return new Promise((resolve, reject) => {
                const WEBPACK_CONFIG = {
                    mode: "development",
                };

                // update webpack config for the current target destination and file name
                WEBPACK_CONFIG.mode   = plugins.argv.dist ? "production" : WEBPACK_CONFIG.mode;
                WEBPACK_CONFIG.output = {
                    filename: destination_file_name
                };

                const TASK = gulp.src(source)
                    // prevent breaking on error
                    .pipe(plugins.plumber({errorHandler: on_error}))
                    // check if source is newer than destination
                    .pipe(plugins.newer(js_directory + "/" + compare_file_name))
                    // lint all scripts
                    .pipe(ESLINT())
                    // print lint errors
                    .pipe(ESLINT.format())
                    // run webpack
                    .pipe(WEBPACK(WEBPACK_CONFIG))
                    // generate a hash and add it to the file name
                    .pipe(plugins.hash({template: "<%= name %>.<%= hash %><%= ext %>"}))
                    // output scripts to compiled directory
                    .pipe(gulp.dest(js_directory))
                    // generate a hash manfiest
                    .pipe(plugins.hash.manifest(".hashmanifest-scripts", {
                        deleteOld: true,
                        sourceDir: js_directory
                    }))
                    // output hash manifest in root
                    .pipe(gulp.dest("."))
                    // reject after errors
                    .on("error", () => {
                        reject(TASK);
                    })
                    // return the task after completion
                    .on("end", () => {
                        resolve(TASK);
                    });
            });
        };

        // scripts task, lints, concatenates, & compresses JS
        return new Promise ((resolve) => {
            // set JS directory
            const JS_DIRECTORY = plugins.argv.dist ? global.settings.paths.dist + "/assets/scripts" : global.settings.paths.dev + "/assets/scripts";

            // set the source directory
            const SOURCE_DIRECTORY = global.settings.paths.src + "/assets/scripts";

            // set up an empty merged stream
            const MERGED_STREAMS = plugins.merge();
            // get the script source folder list
            const SCRIPT_FOLDERS = plugins.fs.readdirSync(SOURCE_DIRECTORY);
            // get the script destination file list
            const SCRIPT_FILES   = plugins.fs.existsSync(JS_DIRECTORY) ? plugins.fs.readdirSync(JS_DIRECTORY) : false;

            // process all the script folders
            const PROCESS_SCRIPT_FOLDERS = () => {
                return Promise.resolve().then(() => {
                    // shift to the next folder
                    const FOLDER_NAME = SCRIPT_FOLDERS.shift();

                    // find the existing destination script file name
                    const FILE_NAME   = SCRIPT_FILES ? SCRIPT_FILES.find((name) => {
                        return name.match(new RegExp(FOLDER_NAME + ".[a-z0-9]{8}.js"));
                    }) : FOLDER_NAME + ".js";

                    // process all scripts, update the stream
                    return PROCESS_SCRIPTS(JS_DIRECTORY, FOLDER_NAME + ".js", FILE_NAME, SOURCE_DIRECTORY + "/" + FOLDER_NAME + "/**/*").then((processed) => {
                        MERGED_STREAMS.add(processed);
                    });
                }).then(() => SCRIPT_FOLDERS.length > 0 ? PROCESS_SCRIPT_FOLDERS() : resolve());
            };

            PROCESS_SCRIPT_FOLDERS().then(() => {
                // wrap up
                return MERGED_STREAMS
                    // prevent breaking on error
                    .pipe(plugins.plumber({
                        errorHandler: on_error,
                    }))
                    // notify that task is complete, if not part of default or watch
                    .pipe(plugins.gulpif(gulp.seq.indexOf("scripts") > gulp.seq.indexOf("default"), plugins.notify({
                        title:   "Success!",
                        message: "Scripts task complete!",
                        onLast:  true,
                    })))
                    // push task to ran_tasks array
                    .on("data", () => {
                        if (ran_tasks.indexOf("scripts") < 0) {
                            ran_tasks.push("scripts");
                        }
                    })
                    // resolve the promise on end
                    .on("end", () => {
                        resolve();
                    });
            });

        });
    }
};

在我的 GitHub 上也可以看到：https ://github.com/JacobDB/new-site/blob/master/gulp-tasks/scripts.js

编辑：我尝试了一些东西，我会在这里详细说明。

  1. console.log("hello world")MERGED_STREAMS.on("data")永远不会在,MERGED_STREAMS.on("error")或之后触发MERGED_STREAMS.on("end")。
  2. 移动const MERGED_STREAMS = plugins.merge();到模块级变量（即紧随 之后const WEBPACK = require("webpack-stream")）不会改变结果。
  3. 执行 #2 然后MERGED_STREAMS.add(gulp.src(source) ...)在 promise 完成后使用而不是添加流不会改变结果，除非离开时.pipe(gulp.dist("."))需要输出 a .hashmanifest，并且始终将任务标记为已运行。
  4. 禁用webpack,hash或eslint, 任何组合都不会产生影响。
  5. 从返回承诺更改PROCESS_SCRIPTS为返回流，然后将每个文件夹作为单独的变量处理，然后手动合并它们似乎可以正确触发运行的任务，但webpack只能运行一次，因此它只输出一个文件 - critical.hash.js. 注意：我没有将此方法与 disable 一起测试，如果始终输出hash，这可能会导致它被标记为正确运行。.hashmanifest
  6. 将 linting 步骤和 webpack 步骤拆分为单独的任务类型会导致任务被正确标记为已运行，但前提是lint任务不是承诺，这会导致unexpected end of stream控制台出错。

编辑 2：根据@Louis 的建议更新了我的任务的修订版本。

标签： javascriptnode.jspromisestreamgulp

解决方案

上面的代码有很多问题。使代码难以遵循和调试的一个主要问题是您new Promise在不需要它的地方使用它。一般来说，如果你有new Promise并且 promise 执行器内部的逻辑会根据另一个 promise 的结果来解决或拒绝，那么你不需要使用new Promise.

有时人们有这样的代码：

function foo() {
  const a = getValueSynchronously();
  const b = getOtherValueSynchronously();
  return doSomethingAsynchronous(a, b).then(x => x.someMethod());
}

假设doSomethigAsynchronous返回一个承诺。foo上面这个函数的问题是，如果getValueSynchronously和getOtherValueSynchronously失败，那么foo会引发一个异常，但如果doSomethingAsynchronous失败，那么它会拒绝一个承诺。因此，如果要处理所有可能的故障，使用的代码foo必须处理同步异常和异步拒绝。有时人们觉得他们可以通过将所有失败都视为承诺拒绝来解决问题：

function foo() {
  return new Promise((resolve, reject) => {
    const a = getValueSynchronously();
    const b = getOtherValueSynchronously();
    doSomethingAsynchronous(a, b).then(x => x.someMethod()).then(resolve, reject);
  });
}

在上面的代码中，如果getValueSynchronously或getOtherValueSynchronously失败，这是一个承诺拒绝。但是上面代码的问题是很容易出错。你可以忘记在需要的地方打电话reject。（事实上​​，你的代码中确实有这个错误。你有嵌套的承诺，它们的拒绝不会被传播。它们只是丢失了，这意味着如果发生错误，你的代码将停止，而你不知道为什么. ) 或者你可能想在嵌套函数中调用 `resolve 方法，这使得逻辑难以遵循。

你也可以这样做：

function foo() {
  return Promise.resolve().then(() => {
    const a = getValueSynchronously();
    const b = getOtherValueSynchronously();
    return doSomethingAsynchronous(a, b);
  }).then(x => x.someMethod());
}

你可以Promise.resolve()用来进入应许的世界（嗯……“应许之地？”）。在上面的代码中，您不必记得调用reject. 如果回调中的代码由于任何原因.then失败，你会得到一个被拒绝的承诺。

我还注意到在许多地方，您从传递给的执行程序函数返回一个值new Promise。如果您不在那里使用，您的代码的行为将完全相同return。为了说明，这段代码：

function foo() {
  return new Promise((resolve, reject) => {
    return doSomethingAsynchronous().then(resolve, reject);
  });
}

行为与此代码完全相同：

function foo() {
  return new Promise((resolve, reject) => {
    doSomethingAsynchronous().then(resolve, reject);
  });
}

从执行器返回的值被忽略。故事结局。如果您认为您从执行者那里返回的值正在做某事，那么这是不正确的。

推荐阅读