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

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

巴特西

Gulp 之图片压缩合并

最新文章

热门文章