Gulp教程之图片压缩

Gulp.js 是一个自动化构建工具，Gulp 配置起来非常简单，可以利用Gulp实现很多功能，比如说配合gulp-imagemin实现图片压缩。下面雷雪松详细的介绍一下使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）。

1.、全局安装 gulp

1	$ npm install --global gulp

2、本地安装gulp-imagemin

1	$ npm install gulp-imagemin --save-dev

3、配置gulpfile.js任务（task）
a、基本用法
//将src/img目录下的图片压缩输出到dist/img目录

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, //类型：Number 默认：5 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化 })) .pipe(gulp.dest('dist/img')); });

b、使用imagemin-pngquant深度压缩图片

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()] //使用pngquant深度压缩png图片的imagemin插件 })) .pipe(gulp.dest('dist/img')); });

5、gulp执行压缩图片任务

1	$ gulp imagemin

来源：Gulp教程之图片压缩_雷雪松的个人blog