作为前端开发,我们在开发网页的时候,往往需要在页面上展示很多图片的icon,由于矢量字体的icon只能展示纯色的字体,对于一些颜色丰富的页面icon我们还需要使用图片去展示。为了提高网页加载的速度,往往需要将零散的小图标拼成一张图,通过background-position来定位就可以了。传统的做法是UI设计师把psd的原稿给到前端,前端开发将页面上需要的图片icon全部切出来,然后用ps拼到一张图片上,并且记住每个图标在图片上的位置,这种集合了页面许多小图标的图片在前端通常叫做雪碧图(sprite),通常拼雪碧图需要耗费前端开发的大量时间,非常影响开发的效率。
其实对于雪碧图可以通过一些图片处理的软件自动生成,并且对应的css文件也会相应的生成。下面介绍通过gulp集成工具结合gulp.spritesmith、GraphicsMagick来自动生成雪碧图的方法。
具体代码
var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); var merge = require('merge-stream'); gulp.task('sprite', function () { var spriteData = gulp.src('image/*.png').pipe(spritesmith({ imgName: 'icon.png', cssName: 'icon.css', imgPath: '../sprite/icon.png', algorithm: 'top-down', cssOpts: { cssSelector: function (sprite) { return '.sp-' + sprite.name; } } })); var imgStream = spriteData.img.pipe(gulp.dest('./output/sprite')); var cssStream = spriteData.css.pipe(gulp.dest('./output/style')); return merge(imgStream, cssStream); }); gulp.task('common', ['sprite'], function () {}); gulp.task('retina-sprite', function () { var spriteData = gulp.src('image/*.png').pipe(spritesmith({ imgName: 'icon.png', cssName: 'icon.css', imgPath: '../sprite/icon.png', algorithm: 'binary-tree',//binary-tree,top-down retinaSrcFilter: './image/*@2x.png', retinaImgName: 'icon@2x.png', retinaImgPath: '../sprite/icon@2x.png', cssOpts: { cssSelector: function (sprite) { return '.sp-' + sprite.name; } } })); var imgStream = spriteData.img.pipe(gulp.dest('./output/sprite')); var cssStream = spriteData.css.pipe(gulp.dest('./output/style')); return merge(imgStream, cssStream); }); gulp.task('retina', ['retina-sprite'], function () {});
对应的文件目录
image文件中放置需要拼接的图片,output文件夹里放置生成的雪碧图和对应的css文件。以上代码可以自动生成一倍的和两倍的雪碧图,用来适应retina屏和非retina屏幕。用node运行gulp common就可以生成一倍的雪碧图,运行gulp retina就可以自动生成两倍的雪碧图用来适应retina屏。