前端自动生成雪碧图

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