Skip to content

Instantly share code, notes, and snippets.

@artemsites
Forked from LoyEgor/gulpfile.js
Created October 4, 2019 10:27
Show Gist options
  • Save artemsites/98c9eaf5261789a81a9e087f7ecf5520 to your computer and use it in GitHub Desktop.
Save artemsites/98c9eaf5261789a81a9e087f7ecf5520 to your computer and use it in GitHub Desktop.
best image compression settings (gulp-imagemin)
// install
// npm i gulp-cache gulp-imagemin imagemin-pngquant imagemin-zopfli imagemin-mozjpeg imagemin-giflossy -f
// node node_modules/jpegtran-bin/lib/install.js
// node node_modules/gifsicle/lib/install.js
// node node_modules/zopflipng-bin/lib/install.js
// node node_modules/mozjpeg/lib/install.js
// node node_modules/giflossy/lib/install.js
// node node_modules/pngquant-bin/lib/install.js
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var imageminPngquant = require('imagemin-pngquant');
var imageminZopfli = require('imagemin-zopfli');
var imageminMozjpeg = require('imagemin-mozjpeg'); //need to run 'brew install libpng'
var imageminGiflossy = require('imagemin-giflossy');
//compress all images
gulp.task('imagemin', function() {
return gulp.src(['app/**/*.{gif,png,jpg}'])
.pipe(cache(imagemin([
//png
imageminPngquant({
speed: 1,
quality: [0.95, 1] //lossy settings
}),
imageminZopfli({
more: true
// iterations: 50 // very slow but more effective
}),
//gif
// imagemin.gifsicle({
// interlaced: true,
// optimizationLevel: 3
// }),
//gif very light lossy, use only one of gifsicle or Giflossy
imageminGiflossy({
optimizationLevel: 3,
optimize: 3, //keep-empty: Preserve empty transparent frames
lossy: 2
}),
//svg
imagemin.svgo({
plugins: [{
removeViewBox: false
}]
}),
//jpg lossless
imagemin.jpegtran({
progressive: true
}),
//jpg very light lossy, use vs jpegtran
imageminMozjpeg({
quality: 90
})
])))
.pipe(gulp.dest('dist'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment