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

Question

我有一组Gulp（v4）任务，用于编译Webpack和Sass、压缩图像等。这些任务在我进行项目工作时通过“watch”任务自动化运行。

当我的"watch"任务正在运行时，如果我保存一个文件，则会触发"默认"的任务集合。如果我在"默认"任务完成之前再次保存文件，则会开始另一个"默认"任务，导致多个"默认"任务并发运行。

我已经通过检查"默认"任务是否在运行，来解决这个问题，但是当我保存文件后快速进行微小的调整并再次保存时，这种方法会导致一些减速问题。这样做意味着只有第一个更改被编译，我必须等待整个过程完成，然后再次保存才能编译新的更改。

我的想法是在触发新的任务时杀死所有旧的"默认"任务。这样，同一任务的多个副本就不会同时运行，但是我可以依赖最新的代码进行编译。

我进行了一些研究，但是找不到与我的情况相匹配的内容。

如何杀死所有旧的gulp任务，而不杀死"watch"任务？

编辑1：当前的工作理论是将"默认"任务集合存储为变量，然后以某种方式使用它来终止进程，但是这似乎并不像我期望的那样工作。下面是我的"watch"任务以供参考。

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

编辑2: 经过更深入的思考，也许这更多是一个Node.js问题而不是Gulp问题——我该如何停止来自函数外部的处理函数？基本上，我想以某种方式将正在执行的函数存储为变量，并在需要重新启动它时终止它。

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

- JacobTheDev

---

你有检查过Gulper（https://dev59.com/YWAh5IYBdhLWcg3wDfkW#28184494）吗？如果它有帮助，请告诉我 :) - Maytham Fahmi

Answer 1

有两种设置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 将在监视功能之外设置，并且监视将以重新加载服务器的方式结束。代码示例：

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

- henry

---

这周很忙，不幸的是没有时间测试，但这看起来是非常有用的信息，非常感谢！ - JacobTheDev

Answer 2

尝试安装gulp重启

npm install gulp-restart

- Ghiath Majjanne

---

啊哈！谢谢，我会看一下的。编辑：似乎与Gulp 4不太兼容，出现了一堆这样的问题：[14:06:21]以下任务未完成：watch，<parallel>，styles，scripts，html，media，spawnChildren [14:06:21]您是否忘记了发出异步完成信号？ - JacobTheDev

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

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

- Mark