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库
相关推荐
huangkanII 2015-06-08
道北吴彦祖 2014-11-11
icecoffeemzp 2017-10-25
85266431 2015-08-24
mahara 2014-12-20
fish 2016-06-23
李大仁 2019-07-01
xxuncle 2019-06-30
ajhongshaorou 2017-10-25
loopstang 2015-12-10
johncena 2014-11-11
sorryericsson 2013-08-24
段雷 2011-10-06
道北吴彦祖 2014-12-02
scnjl 2010-01-26
springflower 2018-12-10
jackwelton 2018-06-19