javascript - 如何在后续保存时重新启动 Gulp 任务？

Question

我有一组 Gulp (v4) 任务，可以执行诸如编译 Webpack 和 Sass、压缩图像等操作。这些任务是在我处理项目时通过“监视”任务自动执行的。

当我的 watch 任务运行时，如果我保存了一个文件，“默认”的任务集就会运行。如果我在“默认”任务完成之前再次保存，另一个“默认”任务开始，导致多个“默认”任务同时运行。

我已通过在触发新任务之前检查“默认”任务未运行来修复此问题，但这导致我在保存文件时出现一些速度变慢的问题，然后快速进行另一个小调整，然后再次保存.这样做意味着只有第一个更改被编译，我必须等待整个过程完成，然后再次保存以使新更改被编译。

我想避免这种情况的想法是在触发新任务时终止所有旧的“默认”任务。这样，同一任务的多个不会同时运行，但我可以依赖正在编译的最新代码。

我做了一些研究，但找不到任何符合我情况的东西。

如何在不杀死“watch”任务的情况下杀死所有“旧”gulp 任务？

---

编辑 1:当前的工作理论是将“默认”任务集存储为一个变量，并以某种方式使用它来终止进程，但这似乎并不像我预期的那样工作。我将我的监视任务放在下面以供引用。

// watch task, runs through all primary tasks, triggers when a file is saved
GULP.task("watch", () => {
    // set up a browser_sync server, if --sync is passed
    if (PLUGINS.argv.sync) {
        CONFIG_MODULE.config(GULP, PLUGINS, "browsersync").then(() => {
            SYNC_MODULE.sync(GULP, PLUGINS, CUSTOM_NOTIFIER);
        });
    }

    // watch for any changes
    const WATCHER = GULP.watch("src/**/*");

    // run default task on any change
    WATCHER.on("all", () => {
        if (!currently_running) {
            currently_running = true;
            GULP.task("default")();
        }
    });

    // end the task
    return;
});

https://github.com/JacobDB/new-site/blob/4bcd5e82165905fdc05d38441605087a86c7b834/gulpfile.js#L202-L224

---

编辑 2:仔细考虑一下，也许这更像是一个 Node.js 问题而不是 Gulp 问题——我怎样才能阻止一个函数从该函数外部进行处理？基本上我想以某种方式将执行函数存储为一个变量，并在我需要重新启动它时终止它。

Answer 1

设置 Gulp 监视的方法有两种。它们看起来非常相似，但有一个重要区别，即一个支持排队(和一些其他功能)而另一个不支持。

您使用的方式，归结为

const watcher = watch(<path glob>)
watcher.on(<event>, function(path, stats) {
    <event handler>
});

使用 chokidar作为 Gulp 的 watch() 基础的实例。

使用 chokidar 实例时，您无权访问 Gulp watch() 队列。

运行 watch 的另一种方式归结为

function watch() {
    gulp.watch(<path>, function(callback) {
        <handler>
        callback();
    });
}

或更惯用的

function myTask = {…}
const watch = () => gulp.watch(<path>, myTask)

像这样设置 watch 事件应该按照您期望的方式排队，您无需执行任何额外操作。

在您的情况下，这是将您的 const WATCHER = GULP.watch("src/**/*"); 替换为

    GULP.watch("src/**/*", default);

并删除整个 WATCHER.on(…);

---

奖金 1

也就是说，要小心那里的递归。我是根据您对名为“默认”的任务的使用推断的……您不想在

const watch = () => gulp.watch("src/**/*", default);
const default = gulp.series(clean, build, serve, watch);

奖励 2

使用 chokidar 实例对日志记录很有用:

function handler() {…}
const watcher = gulp.watch(glob, handler);
watcher.on('all', (path, stats) => {
    console.log(path + ': ' + stats + 'detected') // e.g. "src/test.txt: change detected" is logged immediately
}

奖金 3

通常 Browsersync 会在 watch 函数之外设置，而 watch 会在重新加载服务器时结束。有点像

…
import browserSync from 'browser-sync';
const server = browserSync.create();
function serve(done) {
  server.init(…);
  done();
}
function reload(done) {
  server.reload();
  done();
}
function changeHandler() {…}
const watch = () => gulp.watch(path, gulp.series(changeHandler, reload);
const run = gulp.series(serve, watch);