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',
          // cssTemplate: 'sprite.template.handlebars'
    }));
    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

原文链接:https://segmentfault.com/a/1190000016562454