Gulp webp 函数不遵守 watch 命令

Question

好的，所以我正在使用典型的图像缩小过程。我有 jpg、png 的功能，我有一个单独的功能将它们转换为 webp。

我有以下gulp文件（这里只有相关部分）：

    function clean(done) {
      rimraf(folder.public_img, done);
    }

    function images() {
      return gulp.src([folder.preimages+'/**/*.{gif,png,jpg,svg}'])
        .pipe(cache(imagemin([
          imageminPngquant({
              speed: 1,
              quality: [0.95, 1]
          }),
          imageminZopfli({
              more: true
          }),
          imageminMozjpeg({
              quality: 65
          }),
        ])))
        .pipe(gulp.dest(folder.public_img));
    }

    gulp.task('webp', () =>
        gulp.src([folder.preimages+'/**/*.{gif,png,jpg}'])
            .pipe(webp({
                quality: 65,
                method: 6
            }))
            .pipe(gulp.dest(folder.public_img))
    );

    function serve() {
        gulp.watch(folder.preimages+"/**/*.{gif,png,jpg,svg}", images);
        gulp.watch(folder.preimages+"/**/*.{gif,png,jpg}", webp);
    }

    gulp.task('clean', clean);
    gulp.task('images', images);
    gulp.task('serve', gulp.series('clean', 'images', 'webp', serve));
    gulp.task('default', gulp.series('clean', 'images', 'webp', serve));

所以，基本上当我第一次运行 gulp 时，所有进程运行都很好并且生成了 webp 图像。但是，如果我添加一个新图像，images() 函数运行s，但是由于某种原因 webp() 函数没有执行，就好像它没有看到变化，并且我把它配置成与图像相同的方式。

我尝试了两种选择：

我直接在 images() 函数中添加了 webp 进程，但是这样我的 JPG 和 PNG 文件直接转换为 webp，我没有后备图像。
我尝试创建与其他格式相同的 webp 函数 function webp() { ... }，但是当我尝试运行 gulp 时，它显示了这个错误：

以下任务未完成：默认，您是否忘记发出异步完成信号？

所以我发现我可以使用上面的格式 gulp.task('webp', () =>... 并且可以工作，但不考虑监视功能。我认为这可能与文件末尾的名称分配功能有关，但我对语法不太熟悉。

我应该更改什么才能正确观看？

Answer 1

我能够重新创建您的代码并使其按如下方式工作：

在创建 gulp 任务时，似乎发生了一些愚蠢的事情，因为您已经使用 gulp.task('serve') 创建了一系列运行任务。相反，您可以这样写出您的任务：

gulp.task(clean);
gulp.task(images);
gulp.task(serve);
gulp.task('default', gulp.series(clean, images, webp, serve));

您可能想用其他名称调用您的 webp 函数 - 我遇到了冲突，因为还将 gulp-webp 导入为 const = webp。您也不需要在任务中的函数名称周围加上引号，然后在任务中再次引用它。所以 gulp.task(clean) 工作得很好。你不需要 gulp.task('clean', clean).

您也可以将您的默认任务写成如下：

gulp.task('default', gulp.series(clean, serve);

这对我来说与在该系列中包含图像和 webp 任务具有相同的效果。这个设置对我有用。运行 gulp，它首先运行 clean 函数删除 public_img 文件夹，然后运行 images 然后是 webp。它在初始运行以及我将新图像添加到 preimages 文件夹时起作用。

更新

这是我开始工作的完整 gulp 文件：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const rimraf = require('rimraf');
const webp = require('gulp-webp');

const folder = {
  preimages: 'src/images',
  public_img: 'src/public_img',
};

function clean(done) {
  rimraf(folder.public_img, done);
}

function images() {
  return gulp
    .src([folder.preimages + '/**/*.{gif,png,jpg,svg}'])
    .pipe(imagemin())
    .pipe(gulp.dest(folder.public_img));
}

function webpTask() {
  return gulp
    .src([folder.preimages + '/**/*.{gif,png,jpg}'])
    .pipe(webp())
    .pipe(gulp.dest(folder.public_img));
}

function serve() {
  gulp.watch(folder.preimages + '/**/*.{gif,png,jpg,svg}', images);
  gulp.watch(folder.preimages + '/**/*.{gif,png,jpg}', webpTask);
}

gulp.task('clean', clean);
gulp.task('images', images);
gulp.task('default', gulp.series('clean', 'images', webpTask, serve));

注意：我删除了 gulp serve 任务。我无法让它在任何配置下工作。我认为您运行将任务和函数都命名为 serve 会陷入冲突，尽管我不是 100% 肯定。我将 webp 任务名称更改为 webpTask，因为我将 webp 导入和 webp 函数命名为 webp 时发生冲突。我没有包含任何 webp() 或 imagemin() 配置选项，但这无关紧要。

您还应该能够删除 gulp default 任务中对 images 和 webpTask 函数的调用，因为运行宁 serve 函数应该触发这两个。

在 gulp default 任务运行ning 期间向我的 preimages 文件夹添加新图像以及重新启动 gulp default 任务时，此设置对我都有效.

仅供参考：我使用的是 gulp 4.0.1 版，但我认为这不会有什么不同。

Gulp webp 函数不遵守 watch 命令

Gulp webp function not respecting watch command

asynchronous

gulp

gulp-watch

webp