The Gulp-imagemin of Gulp tutorial

Original link: http://www.ydcss.com/archives/26

Introduction:

Using Gulp-imagemin compressed picture files (including PNG, JPEG, GIF, and SVG pictures), many people will be installed gulp-imagemin errors, I also looked at a lot of information, do not know why, my practice is to reinstall the error, if you know the problem, Please be sure to tell me. 1, install nodejs/Global installation gulp/Local installation gulp/create Package.json and gulpfile.js files

1.1, Gulp Basic use has not yet mastered. See: Gulp Detailed Introductory tutorials

1.2. The sample directory structure is as follows:

2. Local Installation Gulp-imagemin

2.1, Github:https://github.com/sindresorhus/gulp-imagemin

2.2. Installation: Command prompt to perform cnpm install Gulp-imagemin--save-dev

2.3. Note: Do not install CNPM Please use NPM install gulp-imagemin--save-dev What is CNPM and how to install it.

2.4, Description:--save-dev save configuration information to Package.json devdependencies node. Why to save to Package.json.

3. Configure Gulpfile.js

3.1. Basic use

require (' Gulp '),
    require('gulp-imagemin ');

Gulp.task ('testimagemin '() {
    gulp.src (' src/img/*.{ Png,jpg,gif,ico} ')
        . Pipe (Imagemin ())
        . Pipe (Gulp.dest (' dist/img '));

3.2, gulp-imagemin other parameters specific refer to

require (' Gulp '),
    require('gulp-imagemin ');

Gulp.task ('testimagemin '() {
    gulp.src (' src/img/*.{ Png,jpg,gif,ico} ')
        . Pipe (Imagemin ({
            optimizationlevel: 5,//type: Number  default: 3  Value range: 0-7 (optimization level)
            progressivetrue,//Type: Boolean default: False lossless compression jpg picture
            interlaced  true,//Type: Boolean default: False interlaced GIF for rendering
            multipass//Type: Boolean default: False Optimize SVG multiple times until fully optimized
        })
        . Pipe (Gulp.dest (' dist/img '));

3.3, deep compression pictures

require (' Gulp '),
    require(' gulp-imagemin '),
    //ensure local installed imagemin-pngquant [cnpm Install Imagemin-pngquant--save-dev]
    require(' imagemin-pngquant ');

Gulp.task ('testimagemin '() {
    gulp.src (' src/img/*.{ Png,jpg,gif,ico} ')
        . Pipe (Imagemin ({
            progressivetrue,
             Svgoplugins: [{removeviewboxfalse}],//Remove the SVG viewbox attribute use
            : [ Pngquant ()]///Use pngquant deep compress png picture Imagemin plugin
        })
        . Pipe (Gulp.dest (' dist/img '));

3.3, only compress the modified picture. Compressing pictures is time-consuming, in many cases we only modify some of the pictures, there is no need to compress all the pictures, use "Gulp-cache" only compress modified pictures, no modified pictures directly from the cache file read (C:\Users\Administrator\AppData\ Local\temp\gulp-cache).

require ('Gulp '),
    require('gulp-imagemin '),
    require(' Imagemin-pngquant '),
    //ensure local installed Gulp-cache [cnpm install Gulp-cache--save-dev]
    require( ' Gulp-cache ');

Gulp.task ('testimagemin '() {
    gulp.src (' src/img/*.{ Png,jpg,gif,ico} ')
        . Pipe Cache (Imagemin ({
            progressivetrue,
             Svgoplugins: [{removeviewboxfalse}], use
            : [Pngquant ()]
        }))
        . Pipe (Gulp.dest (' dist/img ');
});

4. Perform the task

4.1. Command prompt execution: Gulp testimagemin