0

我试过环顾四周，但找不到任何我能理解的东西。当谈到 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/ 包含许多按月排序的文件夹，并且每个月都会添加一个新的。我想扫描所有这些并优化里面的图像，然后用优化版本替换原始图像，而不在任何特定的预定义文件夹中创建副本。

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

非常感谢！

4

1 回答 1

0

您要使用的是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']);
于 2017-11-12T20:52:08.657 回答