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