前端自动生成雪碧图

做为前端开发，咱们在开发网页的时候，每每须要在页面上展现不少图片的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屏。