Proper configuration of imagemin plugins

[nlenkowski]

I've been trying unsuccessfully to to get the imagemin-pngquant plugin working with gulp-imagemin. No matter what I try my pngs are not compressed with pngquant. Here's my config:

package.json

"gulp": "^3.9.1",
"gulp-imagemin": "^3.0.1",
"imagemin-pngquant": "^5.0.0",

gulpfile.js

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');

gulp.task('images', function() {
    return gulp.src(paths.assets + 'images/**/*.+(png|jpg|gif|jpeg)')
        .pipe(imagemin({
            verbose: true,
            progressive: true,
            plugins: [pngquant()]
        }))
        .pipe(gulp.dest(paths.dist + 'images'));
});

I've tried switching plugins: [pngquant()] to the old value use: [pngquant()], to no affect.

When running the images task with the above configuration I'm getting the following results:
alex.png (saved 63.87 kB - 19.6%).

When I remove the plugins: [pngquant()] option I get the same:
alex.png (saved 63.87 kB - 19.6%)

For comparison, when using gulp-image (which uses pngquant out of the box) I'm getting the following results for the same file:
alex.png -> before=318.79 KB after=150.62 KB reduced=168.17 KB(52.8%)

I'm on OS X 10.11.5 running node v6.2.2. I'm not sure if this is a problem with gulp-imagemin, imagemin-pngquant or my configuration.

[shinnn]

https://github.com/sindresorhus/gulp-imagemin#imageminplugins-options

imagemin([plugins], [options])

imagemin({plugins: [...]}) is wrong usage.

[joeskeen]

@shinnn I understand that imagemin({...}) is wrong usage, but is there a way to specify options without having to change the plugins? I would like to keep the default plugins but specify custom options. If I do something like imagemin(null, {...}) will it keep the defaults?

[shinnn]

@joeskeen imagemin({verbose: true}) works.

gulp-imagemin/index.js

Lines 15 to 18 in bf8d842

	if (typeof plugins === 'object' && !Array.isArray(plugins)) {
	opts = plugins;
	plugins = null;
	}

[nlenkowski]

@shinnn Thanks for putting me on the right track. It appears I was providing options for imagemin, which are a bit different from gulp-imagemin. Several boilperplates I referenced had gulp-imagemin configured incorrectly, I should have just gone right to the source.

The following configuration works great:

var imagemin = require('gulp-imagemin');
var imageminJpg = require('imagemin-jpeg-recompress');
var imageminPng = require('imagemin-pngquant');

.pipe(imagemin(
    [imageminPng(), imageminJpg()],
    {verbose: true}
))

With default configuration:

[20:40:45] gulp-imagemin: ✔ mountain.jpeg (saved 984 B - 0.1%)
[20:40:55] gulp-imagemin: ✔ alex.png (saved 63.87 kB - 19.6%)
[20:40:55] gulp-imagemin: Minified 2 images (saved 64.86 kB - 3.4%)
[20:40:55] Finished 'images' after 9.93 s

With pngquant and jpeg-recompress plugins enabled:

[20:43:30] gulp-imagemin: ✔ alex.png (saved 172.43 kB - 52.8%)
[20:43:31] gulp-imagemin: ✔ mountain.jpeg (saved 1.02 MB - 65.3%)
[20:43:31] gulp-imagemin: Minified 2 images (saved 1.19 MB - 63.1%)
[20:43:31] Finished 'images' after 1.12 s

Thanks again!

[shinnn]

You're welcome, @nlenkowski.

Several boilperplates I referenced had gulp-imagemin configured incorrectly,

I'd be glad if you could report this breaking change to the authors of those boilerplates when you have a time.

[nlenkowski]

Will do 👍