Gulp 之图片压缩合并

同事需要处理很多的图片，由于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

英文文档还是不错的，学习了，记录一下。