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

Question

我有一组 Gulp (v4) 任务，可以执行诸如编译 Webpack 和 Sass、压缩图像等操作。这些任务通过 "watch" 任务自动执行，同时我正在做一个项目。

当我的监视任务是运行ning 时，如果我保存一个文件，"default" 组任务会得到运行。如果我在 "default" 任务完成之前再次保存，另一个 "default" 任务开始，导致多个 "default" 任务同时运行ning。

我已经通过在触发新任务之前检查 "default" 任务是否运行ning 来解决这个问题，但这在我保存文件时导致了一些速度变慢的问题，然后快速进行另一个小调整，然后再次保存。这样做意味着只有第一个更改被编译，我必须等待整个过程完成，然后再次保存新的更改才能被编译。

我想绕过这个问题的想法是在触发新任务时终止所有旧的 "default" 任务。这样，同一任务的倍数不会同时运行，但我可以依赖正在编译的最新代码。

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

如何在不终止 "watch" 任务的情况下终止所有 "old" gulp 任务？

编辑 1：当前的工作理论是将 "default" 任务集存储为一个变量，并以某种方式使用它来终止进程，但这似乎并没有像我预期的那样工作。我把我的守望任务放在下面，以供参考。

// 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重启

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

Retrieves the last time a task was successfully completed during the current running process. Most useful on subsequent task runs while a watcher is running.

When combined with src(), enables incremental builds to speed up execution times by skipping files that haven't changed since the last successful task completion.

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

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

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

How can I restart my Gulp task on subsequent saves?

javascript

node.js

gulp

gulp-watch

奖金 1

奖金 2

奖金 3