Question

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

对于这个愚蠢的问题感到抱歉，如果我能够自己弄清楚这一点我不会问，但我真的不知道怎么做，我希望你能理解。

非常感谢！

Answer 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']);

gulp-imagemin - 使用source作为动态目标

1 个答案: