前端自動生成雪碧圖

作為前端開發，我們在開發網頁的時候，往往需要在頁面上展示很多圖片的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: '[e-mail]',
        retinaImgPath: '../sprite/[e-mail]',

        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屏。