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'));
});

合并前
Tool-生成雪碧图(sprite)

合并后
Tool-生成雪碧图(sprite)
Tool-生成雪碧图(sprite)

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

相关推荐