Функция gulp webp не соблюдает команду просмотра

Я смог воссоздать ваш код и заставить его работать следующим образом:

Кажется, что при создании ваших задач 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);

Это имело для меня тот же эффект, что и включение изображений и веб-задач в серию. Эта установка работала для меня. Запустив gulp, он сначала запустил функцию очистки для удаления папки public_img, затем запустил images, а затем webp. Это сработало при первом запуске, а также при добавлении нового изображения в папку preimages.

Обновлять

Вот полный gulpfile, с которым мне пришлось работать:

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(), но это не должно иметь значения.

Вы также должны иметь возможность удалить вызовы функций images и webpTask в задаче gulp default, так как запуск функции serve должен вызывать обе из них.

Эта настройка работала для меня как при добавлении новых изображений в мою папку preimages во время выполнения задачи gulp default, так и при перезапуске задачи gulp default.

К вашему сведению: я использую gulp версии 4.0.1., но я не думаю, что это должно иметь значение для этого.