前端自动生成雪碧图

作为前端开发，我们在开发网页的时候，往往需要在页面上展示很多图片的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屏。