gulp-imagemin - использовать источник как динамическое назначение

Question

Я пытался осмотреться, но не могу найти ничего, что могу понять. Я довольно новичок, когда дело доходит до глотка и прочего, поскольку я в основном использую его для автоматизации пары задач для разработчика переднего плана, поэтому мне удалось заставить его работать с несколькими нужными мне вещами (sass, watch, browser) -sync), но теперь я хотел добавить imagemin к моему gulpfile.js, и тут возникает проблема.

Я смог заставить его работать со стандартным синтаксисом

            // Optimise Images
            gulp.task('imagemin', function() {
               var imgSrc = 'wp-content/themes/solid-theme-child/img/*.+(png|jpg|gif)',
               imgDst = 'wp-content/themes/solid-theme-child/img/opt';

               gulp.src(imgSrc)
               .pipe(changed(imgDst))
               .pipe(imagemin())
               .pipe(gulp.dest(imgDst));
            });

Я в основном работаю с WordPress и хотел бы просмотреть всю папку / wp-content / uploads и ее подпапки, но проблема в том, что я не могу определить конкретную выходную папку, так как / uploads / содержит много папок, отсортированных по месяцам, и новый добавляется каждый месяц. Я хотел бы отсканировать все это и оптимизировать изображения внутри, а затем заменить исходные изображения их оптимизированной версией, не создавая копии в какой-либо определенной предопределенной папке.

Извините за глупый вопрос, если бы я мог сам разобраться, я бы не спросил, но я действительно не знаю, как это сделать, надеюсь, вы понимаете.

Большое спасибо!

Answer 1

То, что вы хотите использовать, это шаблон glob (**). Позволяет выбирать файлы в каталогах на несколько уровней вниз. Он часто используется вместе с Gulp.

Вы можете использовать одно и то же имя папки в качестве ввода для обоих gulp.src() а также gulp.dest(), Это перезапишет исходные изображения.

Вот пример, который оптимизирует все изображения PNG в wp-content/uploads папка. Он перейдет во все подпапки, выберет изображения png, оптимизирует их и запишет обратно в те же папки, в которых они находились.

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminPngquant = require('imagemin-pngquant');

const imagesDir = 'wp-content/uploads';

gulp.task('compressimages', () => {
  gulp.src(`${imagesDir}/**/*.png`)
    .pipe(imagemin([imageminPngquant({ quality: '30' })]))
    .pipe(gulp.dest(imagesDir));
});

gulp.task('default', ['compressimages']);