gulp教程之gulp-imagemin

4,571次阅读

共计 1640 个字符，预计需要花费 5 分钟才能阅读完成。

简介：
使用 gulp-imagemin 压缩图片文件（包括 PNG、JPEG、GIF 和 SVG 图片）

本地安装 gulp-imagemin
安装：命令提示符执行 npm install gulp-imagemin –save-dev

配置 gulpfile.js
1、基本使用

var gulp = require('gulp'),
imagemin = require('gulp-imagemin');

gulp.task('testImagemin', function () {gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
});

2、gulp-imagemin 其他参数具体参看

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
 
gulp.task('testImagemin', function () {gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, // 类型：Number  默认：3  取值范围：0-7（优化等级）progressive: true, // 类型：Boolean 默认：false 无损压缩 jpg 图片
            interlaced: true, // 类型：Boolean 默认：false 隔行扫描 gif 进行渲染
            multipass: true // 类型：Boolean 默认：false 多次优化 svg 直到完全优化
        }))
        .pipe(gulp.dest('dist/img'));
});

3、深度压缩图片

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    // 确保本地已安装 imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
    pngquant = require('imagemin-pngquant');
 
gulp.task('testImagemin', function () {gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],// 不要移除 svg 的 viewbox 属性
            use: [pngquant()] // 使用 pngquant 深度压缩 png 图片的 imagemin 插件
        }))
        .pipe(gulp.dest('dist/img'));
});

3、只压缩修改的图片。压缩图片时比较耗时，在很多情况下我们只修改了某些图片，没有必要压缩所有图片，使用”gulp-cache”只压缩修改的图片，没有修改的图片直接从缓存文件读取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）。

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    // 确保本地已安装 gulp-cache [cnpm install gulp-cache --save-dev]
    cache = require('gulp-cache');
    
gulp.task('testImagemin', function () {gulp.src('src/img/*.{png,jpg,gif,ico}')
        .pipe(cache(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest('dist/img'));
});

正文完