将 Gulp-imagemin 与 imagemin-jpeg-recompress 插件一起使用？答案

【问题标题】：Use Gulp-imagemin with imagemin-jpeg-recompress plugin?将 Gulp-imagemin 与 imagemin-jpeg-recompress 插件一起使用？
【发布时间】：2015-06-19 20:49:25
【问题描述】：

我只是在尝试使用 Gulp 来简单地优化图像。我发现imagemin-jpeg-recompress 比gulp-imagemin 附带的默认优化器更能减少JPG。我想知道是否有办法使用gulp-imagemin，但将jpegtran 插件换成imagemin-jpeg-recompress。

我似乎找不到任何关于这如何协同工作的详细文档。

【问题讨论】：

标签： jpeg gulp gulp-imagemin

【解决方案1】：

我将回答我自己的问题。我可能是错的，但它似乎是一个简单的过程。只需require 插件（在这种情况下，我想使用imagemin-jpeg-recompress 插件）。然后通过imagemin 的use 属性指定要在imagemin 中使用的插件。我相信这将覆盖 imagemin 附带的捆绑的 jpegtran 优化器。

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var imageminJpegRecompress = require('imagemin-jpeg-recompress');

gulp.task('optimize', function () {
  return gulp.src('src/images/*')
    .pipe(imagemin({
      use:[imageminJpegRecompress({
        loops:4,
        min: 50,
        max: 95,
        quality:'high' 
      })]
    }))
});

【讨论】：

【解决方案2】：

在 gulp-imagemin 的新版本 (3.x) 中，上述解决方案不起作用。原因是他们改变了插件声明和配置为数组语法和范围参数的方式。

API 更改为documented in Release 3.0.0

gulp.task('default', () => {
    return gulp.src('src/images/*')
-       .pipe(imagemin({
-           interlaced: true,
-           progressive: true,
-           optimizationLevel: 5,
-           svgoPlugins: [{removeViewBox: false}]
-       }))
+       .pipe(imagemin([
+           imagemin.gifsicle({interlaced: true}),
+           imagemin.mozjpeg({progressive: true}),
+           imagemin.optipng({optimizationLevel: 5}),
+           imagemin.svgo({plugins: [{removeViewBox: false}]})
+       ]))
        .pipe(gulp.dest('dist/images'));
 });

还要注意“如果你传入一个插件数组，你需要显式传入你想要的每个插件，而不仅仅是你想要更改选项的那些。”

新版本的 imagemin-jpeg-recompress (5.x) 遵循此 API。

综合起来，使用默认插件（除了 jpegtran，我们用 jpeg-recompress 覆盖），上面的答案可以格式化如下：

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var imageminJpegRecompress = require('imagemin-jpeg-recompress');

gulp.task('optimize', function () {
  return gulp.src('src/images/*')
    .pipe(imagemin([
      imagemin.gifsicle(),
      imageminJpegRecompress({
        loops:4,
        min: 50,
        max: 95,
        quality:'high' 
      }),
      imagemin.optipng(),
      imagemin.svgo()
    ]))
});

Relevant discussion on gulp-imagemin github issue tracker

【讨论】：

感谢您链接发行说明。我错过了 5 月份的更改，经过一个小时的搜索后没有找到新的语法。 ?
好的，谢谢！我一直在寻找几个小时，我确认后者工作完美。