Функция Gulp WebP не уважает команду часов - PullRequest
Новая
       52

Функция Gulp WebP не уважает команду часов

0 голосов
/ 20 июня 2019

Хорошо, поэтому я использую типичный процесс минимизации изображения. У меня есть функции для JPG, PNG, и у меня есть отдельная функция для преобразования их в WebP.

У меня есть следующий файл gulpfile (здесь находятся только соответствующие части): 

    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(), но по какой-то причине функция webp() не выполняется, как будто она не видит изменений, и я настроил ее так же, как изображения .

Я попробовал две альтернативы:

  1. Я добавил процесс webp непосредственно в функцию images(), но таким образом мои файлы JPG и PNG были напрямую преобразованы в webp, и у меня не было запасных изображений.

  2. Я пытался создать функцию webp в том же формате, что и другие function webp() { ... }, но когда я попытался запустить gulp, она показала эту ошибку:

    Следующие задачи не были выполнены: по умолчанию, Вы забыли сообщить об асинхронном завершении?

Итак, я обнаружил, что могу использовать формат выше gulp.task('webp', () =>..., и это работает, но не относится к функции наблюдения. Я думаю, что это может быть связано с функцией присвоения имени в конце файла, но я не очень знаком с синтаксисом.

Что я должен изменить, чтобы он смотрел правильно?

1 Ответ

1 голос
/ 20 июня 2019

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

При создании ваших сложных задач, кажется, происходит что-то глупое, потому что вы создали серию задач для запуска с вашим 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, он сначала запустил функцию очистки для удаления папки 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., но я не думаю, что это должно иметь значение для этого.

...