Gulp 之图片压缩合并

  同事须要处理不少的图片，因为UI那边提供图片比较大，为了性能好一点，程序包小一点，所以但愿我帮忙作成小程序来完成此工做。

  其实以前作过一个grunt写的图片压缩合并工具，当时是为了处理270多个国家/地区的国旗/logo，此次打算用gulp写一个，好久没碰过了，分了一下，大概两件事须要我去作：

   1.图片压缩

   2.图片雪碧图生成

  而后在很容易就百度到了gulp-imagemin插件，这个作压缩很容易，压缩比什么的就不细看了，当我寻找合并工具的时候，百度真的很傻，搜索到的所有是gulp-css-spriter，而这个工具是用于对css中包含的图片进行处理的，对于这个需求并非很符合。好吧，我google下，很快找到答案了，gulp.spritesmith这个插件恰好知足需求。

  代码以下：

  

 1 var gulp=require('gulp'),
 2     spriter=require('gulp-css-spriter'),
 3     imagemin = require('gulp-imagemin'),
 4     spritesmith = require('gulp.spritesmith');
 5 
 6 
 7 gulp.task('imagesmin', function(){
 8 
 9     return gulp.src("img/*")
10         .pipe(imagemin())
11         .pipe(gulp.dest("temp"))
12         .pipe(spriter({
13             'spriteSheet': './dist/spritesheet.png',
14             'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
15         }))
16         .pipe(gulp.dest('dist/css'))
17 })
18 //gulp.task('spriter', function() {
19 //    return gulp.src('./src/css/styles.css')
20 //        .pipe(spriter({
21 //            'spriteSheet': './dist/spritesheet.png',
22 //            'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
23 //        }))
24 //        .pipe(gulp.dest('dist/css'));
25 //});
26 gulp.task('sprite', function () {
27     var spriteData = gulp.src('temp/*').pipe(spritesmith({
28         imgName: 'sprite.png',
29         cssName: 'sprite.css',
30         padding: 20
31     }));
32     return spriteData.pipe(gulp.dest('dist'));
33 });
34 gulp.task('default', ["sprite"]);

  而后，就是安装插件了，这个不想重复什么，npm  install就能够了，没什么技术含量，惟一值得一提的是，运行的时候遇到一个gulp安装好了，结果报错没有命令gulp，网上查了下，须要修改环境变量，我就把环境变量了下就能够运行了。

  另外，gulp.spritesmith很强大，支持生成的css文件模板，能够设置图标的排列方式，间距，总之，很齐全的一个工具，附上npm地址：

   https://www.npmjs.com/package/gulp.spritesmith 

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