Tool-生成雪碧圖（sprite）

前言

網站開發時，咱們會使用會多小圖標，不少小圖標的調用一直都是個問題。

小圖標使用方法

圖標字體（例如:阿里出品的iconfont）
雪碧圖（CSS Sprite）
等等...

雪碧圖（CSS雪碧）

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。

雪碧圖優勢

1. 減小加載網頁圖片時對服務器的請求次數

能夠合併多數背景圖片和小圖標，方便在任何位置使用，這樣不一樣位置的請求只須要調用一個圖片，從而減小對服務器的請求次數，下降服務器壓力，同時提升了頁面的加載速度，節約服務器的流量

2. 提升頁面的加載速度

sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)；單獨的一張 JPEG 或者 PNG sprite 在大小上很是可能比把一張圖分紅多張得來的圖片總尺寸小。

生成雪碧圖

PhotoShop（傻瓜方式）

經過PhotoShop把圖片合成一張大圖，讓後手動寫css，定位到圖標

Gulp生成雪碧圖（項目連接）

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function() {
    // var DEST_NAME = args[1];
    var spriteData = gulp.src('src/sprite-images/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css',
        imgPath: '../images/sprite.png'
    }));
    spriteData.css.pipe(gulp.dest('public/styles'));
    spriteData.img.pipe(gulp.dest('public/images'));
});

合併前

合併後

Webpack生成雪碧圖（項目連接）

var SpritesmithPlugin = require('webpack-spritesmith');

module.exports = {
    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: 'src/sprite-images',
                glob: '*.png'
            },
            target: {
                image: 'public/images/sprite.png',
                css: 'public/styles/sprite.css'
            },
            apiOptions: {
                cssImageRef: "../images/sprite.png"
            }
        })
    ]
}

相關NPM庫

webpack-spritesmith
gulp.spritesmith