gulp压缩图片

为什么80%的码农都做不了架构师？>>>   

使用gulp进行图片压缩首先要寻找合适的插件，本文主要介绍两种：

• gulp-imagemin
• gulp-smushit

 

gulp-imagemin

这个插件可以用来压缩PNG, JPEG, GIF和SVG图片

优势：

• 有很多定制选项
• 引入第三方优化插件
• 处理多种图片格式

劣势：

• 没有verbose输出选项

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

gulp.task('imagemin', function () {
    return gulp.src('src/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('imagemin-dist'));
});

[11:17:35] Using gulpfile ~/Desktop/Work/Practice/gulp-compressor/gulpfile.js
[11:17:35] Starting 'imagemin'...
[11:17:40] gulp-imagemin: Minified 2 images (saved 57.7 kB - 2.2%)
[11:17:40] Finished 'imagemin' after 14 s

结论：图片体积减小了57.7KB (约2.2%)

 

smushit

Yahoo开发的一款用来优化PNG和JPG的插件，它的原理是移除图片文件中不必要的数据。这是一个无损压缩工具，这意味着优化不会改变图片的显示效果和质量

优势：易配置

劣势：只能处理JPG和PNG

var gulp = require('gulp');
var smushit = require('gulp-smushit');

gulp.task('smushit', function () {
    return gulp.src('src/*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('smushit-dist'));
});

 

[11:47:27] Using gulpfile ~/Desktop/Work/Practice/gulp-compressor/gulpfile.js
[11:47:27] Starting 'smushit'...
[11:49:28] d:/2.jpg
[11:49:28] gulp-smushit: Compress rate % 0
[11:49:28] gulp-smushit: 1188874 bytes  to   1188223 bytes
[11:50:06] d:/2-1.png
[11:50:06] gulp-smushit: Compress rate % 69
[11:50:06] gulp-smushit: 1458533 bytes  to   446429 bytes
[11:50:06] Finished 'smushit' after 2.7 min

结论：图片体积减小69%

转载于:https://my.oschina.net/kezhen/blog/1487374