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教程之图片压缩
2018年5月5日 下午1:19
本站已开通投稿，欢迎博主支持！（采纳后提供版权保护，开通作者专栏）
2018年6月2日 下午4:16
新手学习了~~
2019年3月11日 下午11:41
这样压缩图片快啊，多谢学习了
2019年4月11日 上午9:48
谢谢了！
2019年5月5日 下午9:34
哇塞，居然是沙发？留个名
2019年5月9日 下午9:47
看过了。很好很强大。