Picture compression of Gulp tutorial

Gulp.js is an automated building tool, GULP configuration is very simple, you can use GULP to achieve a lot of functions, such as gulp-imagemin with the implementation of image compression. The following PHP programmer Rechesson A detailed description of using Gulp-imagemin compressed image files (including PNG, JPEG, GIF, and SVG pictures).

1., Global Installation Gulp

1	$ NPM Install--global Gulp

2. Local Installation Gulp-imagemin

1	$ NPM Install gulp-imagemin--save-dev

3. Configure Gulpfile.js Tasks (Task)
A, basic usage
Compress the picture in the Src/img directory to the DIST/IMG directory

1 2 3 4 5 6 7 8 9 10 11 12 13

var gulp = require (' Gulp '), Imagemin = require (' gulp-imagemin '); Gulp. Task (' Imagemin ', function () { Gulp. SRC (' src/img/*.{ Png,jpg,gif,ico} ') . Pipe (Imagemin ({ Optimizationlevel:5,//Type: Number default: 5 Value range: 0-7 (Optimization level) Progressive:true,//Type: Boolean default: False lossless compression jpg picture Interlaced:true,//Type: Boolean default: False interlaced GIF for rendering Multipass:true//Type: Boolean default: False multiple optimizations to optimize SVG until fully optimized } ) ) . Pipe (Gulp dest (' dist/img ')); } ) ;

b, use imagemin-pngquant depth compression picture

1	$ NPM Install imagemin-pngquant--save-dev

1 2 3 4 5 6 7 8 9 10 11

var gulp = require (' Gulp '), Imagemin = require (' Gulp-imagemin '), Pngquant = require (' imagemin-pngquant '); Gulp. Task (' Imagemin ', function () { Gulp. SRC (' src/img/*.{ Png,jpg,gif,ico} ') . Pipe (Imagemin ({ Use: [Pngquant ()]//Imagemin plugin with pngquant deep compression png picture } ) ) . Pipe (Gulp dest (' dist/img ')); } ) ;

5, Gulp Execution compressed picture task

1	$ Gulp Imagemin

Tags: Gulp tutorials, Nodejs learning
Source: PHP Programmer Rechesson's Blog-Gulp Tutorial picture compression