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
看过了。很好很强大。