如何使用Gulp裁剪和压缩图片
自从开始使用scss后，都是用grunt来实时监听并编译。偶然试了下用gulp来实时编译scss，发现速度比grunt快了不是一点点。同等情况下，grunt编译要花十几秒， 而gulp只要几十毫秒。所以，我慢慢转投了gulp阵营。
有点扯远了。今天主要记录下自己使用gulp裁剪和压缩图片的过程。有个站点有上千张图片，很多图片宽高和体积都太大，但我自己又不想多装一个WordPress插件去压缩它们，所以想到了用gulp来处理，然后再替换显示。
一、先在package.json里声明依赖
{
"dependencies": {
"gulp": "latest",
"gulp-imagemin": "latest",
"gulp-image-resize": "latest",
"imagemin-pngquant": "latest"
}
}二、指定数值或比例裁剪宽高：gulp-image-resize
这里我只想指定宽度，然后高度自动，所以就这么设置了。更多设置请参考上面的链接。
注意该插件需要依赖：imagemagick(或graphicsmagick)和imagemin-pngquant。
gulp.task('image-resize', function () {
return gulp.src('www/screen/*.+(jpeg|jpg|png)')
.pipe(imageResize({
width: 1000
}))
.pipe(gulp.dest('www/screen/'));
});三、压缩图片体积：gulp-imagemin
可以压缩gif，png和jpg。
用这个插件压缩jpg图片，体积压缩得越小，图片就越不清晰，所以不建议把jpg图片压缩质量设置得过低，60%-80%为宜。
而把png24压缩成png8，提及一般可以减少50%以上。
下面主要讲下如何把png24转成png8：
gulp.task('images-opt', function () {
gulp.src('www/screen/*.+(jpeg|jpg|png)')
.pipe(imagemin({
progressive: true,
use: [pngquant({quality: '65-80'})]
}))
.pipe(gulp.dest('www/screen/'));
});四、压缩效果
tinypng.com是一个非常不错的网站，同样的图片通过这个网站和上述gulp方法压缩后，得到的体积差不多一直，质量也不错，压缩算法是一样的也说不定。
另外，近千张总大小为76M的图片，通过gulp压缩（只压缩没有裁剪）后大小只有48M，随机抽取一些图片查看后质量可以接受。高质量和低体积不能兼得，只能做出合适的权衡。
