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

Question

我只是在试验 Gulp 来简单地优化图像。我发现 imagemin-jpeg-recompress reduces JPGs more than the default optimizer that comes with gulp-imagemin。我想知道是否有办法使用 gulp-imagemin 但将 jpegtran 插件换成 imagemin-jpeg-recompress.

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

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

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

还注意到 "if you pass in an array of plugins you need to explicitly pass in every plugin you want, not just the ones you want to change options for."

新版本的 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

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

Use Gulp-imagemin with imagemin-jpeg-recompress plugin?

jpeg

gulp

gulp-imagemin