前端自動生成雪碧圖

做爲前端開發，咱們在開發網頁的時候，每每須要在頁面上展現不少圖片的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屏。