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

Question

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

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

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

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

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

如何在不杀死“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 restart

npm install gulp-restart

Answer 2

有两种方法可以设置 Gulp 手表。它们看起来非常相似，但有一个重要的区别是一个支持排队（和一些其他功能）而另一个不支持。

你使用的方式，归结为

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

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

使用 chokidar 实例时，您无权访问 Gulp 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

也就是说，要小心那里的递归。我是根据您对名为“default”的任务的使用进行推断的……您不想发现自己在

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

Answer 3

正如@henry 所说，如果您切换到非 chokidar 版本，您可以免费排队（因为它是默认设置）。见no queue with chokidar。

但这并不能加快您的任务完成时间。有一个问题要求将停止正在运行的任务的功能添加到 gulp - how to stop a running task - 它已被立即处理。

如果您的顾虑之一是加快执行时间，您可以尝试lastRun() 函数选项。 gulp lastRun documentation

检索最后一次成功完成任务的时间 当前运行进程。在后续任务运行时最有用，而 观察者正在运行。

当与 src() 结合使用时，可以加快增量构建 通过跳过自上次以来未更改的文件的执行时间 成功完成任务。

const { src, dest, lastRun, watch } = require('gulp');
const imagemin = require('gulp-imagemin');

function images() {
  return src('src/images/**/*.jpg', { since: lastRun(images) })
    .pipe(imagemin())
    .pipe(dest('build/img/'));
}

exports.default = function() {
  watch('src/images/**/*.jpg', images);
};

来自同一文档的示例。在这种情况下，如果图像在当前运行任务期间被成功压缩，则不会重新压缩。根据您的其他任务，这可能会减少您等待队列任务完成的时间。