同事需要处理很多的图片，由于UI那边提供图片比较大，为了性能好一点，程序包小一点，因此希望我帮忙做成小程序来完成此工作。
其实之前做过一个grunt写的图片压缩合并工具，当时是为了处理270多个国家/地区的国旗/logo，这次打算用gulp写一个，很久没碰过了，分了一下，大概两件事需要我去做：
1.图片压缩
2.图片雪碧图生成
然后在很容易就百度到了gulp-imagemin插件，这个做压缩很容易，压缩比什么的就不细看了，当我寻找合并工具的时候，百度真的很傻，搜索到的全部是gulp-css-spriter，而这个工具是用于对css中包含的图片进行处理的，对于这个需求并不是很符合。好吧，我google下，很快找到答案了，gulp.spritesmith这个插件刚好满足需求。
代码如下：
var gulp=require('gulp'),
spriter=require('gulp-css-spriter'),
imagemin = require('gulp-imagemin'),
spritesmith = require('gulp.spritesmith');
gulp.task('imagesmin', function(){
return gulp.src("img/*")
.pipe(imagemin())
.pipe(gulp.dest("temp"))
.pipe(spriter({
'spriteSheet': './dist/spritesheet.png',
'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
}))
.pipe(gulp.dest('dist/css'))
})
//gulp.task('spriter', function() {
// return gulp.src('./src/css/styles.css')
// .pipe(spriter({
// 'spriteSheet': './dist/spritesheet.png',
// 'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
// }))
// .pipe(gulp.dest('dist/css'));
//});
gulp.task('sprite', function () {
var spriteData = gulp.src('temp/*').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css',
padding: 20
}));
return spriteData.pipe(gulp.dest('dist'));
});
gulp.task('default', ["sprite"]);
然后，就是安装插件了，这个不想重复什么，npm install就可以了，没什么技术含量，唯一值得一提的是，运行的时候遇到一个gulp安装好了，结果报错没有命令gulp，网上查了下，需要修改环境变量，我就把环境变量了下就可以运行了。
另外，gulp.spritesmith很强大，支持生成的css文件模板，可以设置图标的排列方式，间距，总之，很齐全的一个工具，附上npm地址：
https://www.npmjs.com/package/gulp.spritesmith
英文文档还是不错的，学习了，记录一下。