gulp-imagemin - 使用源作为动态目标答案

【问题标题】：gulp-imagemin - use source as dynamic destinationgulp-imagemin - 使用源作为动态目标
【发布时间】：2017-03-19 14:34:49
【问题描述】：

我试过环顾四周，但找不到任何我能理解的东西。当谈到 gulp 和其他东西时，我是一个新手，因为我主要使用它来自动化前端开发人员的一些任务，所以我设法让它与我需要的一些东西（sass、watch、浏览器）一起工作-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/ 包含许多按月排序的文件夹，并且每个月都会添加一个新文件夹。我想扫描所有这些并优化里面的图像，然后用优化版本替换原始图像，而不在任何特定的预定义文件夹中创建副本。

抱歉这个愚蠢的问题，如果我能自己解决这个问题，我就不会问了，但我真的不知道该怎么做，希望你能理解。

非常感谢！

【问题讨论】：

标签： json wordpress gulp imagemin

【解决方案1】：

您要使用的是glob (**) 模式。它允许您在多个级别的目录中选择文件。它经常与 Gulp 一起使用。

您可以使用相同的文件夹名称作为gulp.src() 和gulp.dest() 的输入。这将覆盖原始图像。

这是一个优化wp-content/uploads文件夹中所有png图像的例子。它将进入所有子文件夹，选择 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']);

【讨论】：