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 

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