Gulp plug-in GULP-IMAGEMIN,IMAGEMIN-PNGQUANT-GFW and Gulp-cache

Introduction to GULP-IMAGEMIN,IMAGEMIN-PNGQUANT-GFW and Gulp-cache :

            gulp-imagemin plugin is used to compress picture files (including png,jpeg,gif and SVG images).

             IMAGEMIN-PNGQUANT-GFW plugin is used to compress image files in PNG format in depth.

     The         gulp-cache plugin is used to read cache files. Compressing pictures can take a long time, and using "Gulp-cache"   plugins can reduce repetitive compression.        

I. "GULP-IMAGEMIN,IMAGEMIN-PNGQUANT-GFW and Gulp-cache "  plug-in use

1, Install "GULP-IMAGEMIN,IMAGEMIN-PNGQUANT-GFW and Gulp-cache plug-in commands (executed at Terminal entry to project root)

NPM Install--save-dev gulp-load-plugins gulp-imagemin gulp-cache IMAGEMIN-PNGQUANT-GFW

2, in the project root directory to provide "Gulp-imagemin" plug-in task configuration required src directory and source files (source files placed in the SRC directory)

mkdir SRC

3. Configure the use of "GULP-IMAGEMIN,IMAGEMIN-PNGQUANT-GFW and Gulp-cache" in the Gulpfile.js file

Specific examples:
Use only the Gulp-imagemin plugin
var gulp = require (' Gulp '),
Plugins = require (' Gulp-load-plugins ') (); Loading plugins

Gulp.task (' Imagemin ', function () {//Custom "Imagemin" task
Return Gulp.src (' src/images/*.{ Png,jpeg,gif} ')//blur match all picture files under Src/images directory
. Pipe (Plugins.imagemin ({
Optimizationlevel:5,//Type: Number default: 3 Value range: 0-7 (Optimization level)
Progressive:true,//Type: Boolean default: False lossless compression jpg picture
Interlaced:true,//Type: Boolean default: False to render with interlaced GIF
Multipass:true//Type: Boolean default: False optimizes SVG multiple times until fully optimized
}))
. Pipe (Gulp.dest (' dist/img ')); File storage path after compression
});

Specific examples:
Using the "GULP-IMAGEMIN,IMAGEMIN-PNGQUANT-GFW and Gulp-cache" plugin
Because some pictures are larger, it is possible to compress them in depth and compress only the modified pictures, which are read from the cache without modification.
var gulp = require (' Gulp '),
Pngquant = require (' IMAGEMIN-PNGQUANT-GFW '),
Plugins = require (' Gulp-load-plugins ') (); Loading plugins

Gulp.task (' Imagemin ', function () {//Custom "Imagemin" task
Return Gulp.src (' src/images/*.{ Png,jpeg,gif} ')//blur match all picture files under Src/images directory
. Pipe (Plugins.cache (Plugins.imagemin ({
Progressive:true,//Type: Boolean default: False lossless compression jpg picture
Svgoplugins: [{removeviewbox:false}],//Do not remove the Viewbox attribute of the SVG picture
Use: [Pngquant ({//Deep compress PNG format picture
Quality: ' 65-80 ',//Picture quality
Speed:4//Compression rate
})]
})))
. Pipe (Gulp.dest (' dist/img ')); File storage path after compression
});

4, finally run "Gulp imagemin" command in terminal

PS: If there is no error message, prove that there is no problem. Now go to the project root to see if the "dist/img" directory and the target file are generated. Not to be continued.

This article from "Luo Chen's Blog" blog, reproduced please contact the author!

Gulp plug-in GULP-IMAGEMIN,IMAGEMIN-PNGQUANT-GFW and Gulp-cache