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
Tags: Gulp tutorials, Nodejs learning
Source: PHP Programmer Rechesson's Blog-Gulp Tutorial picture compression