如何使用Gulp裁剪和压缩图片
今天主要记录下自己使用gulp裁剪和压缩图片的过程。有个站点有上千张图片，很多图片宽高和体积都太大，但我自己又不想多装一个WordPress插件去压缩它们，所以想到了用gulp来处理，然后再替换显示。
一、先在package.json里声明依赖
|
1
2
3
4
5
6
7
8
|
{"dependencies": { "gulp": "latest", "gulp-imagemin": "latest", "gulp-image-resize": "latest", "imagemin-pngquant": "latest" }} |
二、指定数值或比例裁剪宽高：gulp-image-resize
这里我只想指定宽度，然后高度自动，所以就这么设置了。更多设置请参考上面的链接。
注意该插件需要依赖：imagemagick(或graphicsmagick)和imagemin-pngquant。
mac安装方法：
brew imagemagick
|
1
2
3
4
5
6
7
|
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：
|
1
2
3
4
5
6
7
8
|
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，随机抽取一些图片查看后质量可以接受。高质量和低体积不能兼得，只能做出合适的权衡。
