CSS Sprites
CSS Sprites又称CSS精灵 (谐音为css雪碧),是一种网页图片应用处理方式
CSS Sprites目的
将一个页面内所需要显示的图片全部整合到一张大图中,并使用css属性background-position进行调用
这样的话,当页面渲染时,可以减少请求次数,在一定程度上能够加快网页加载速度
通过gulp生成使用雪碧图(css精灵)
①先自动生成package.json文件
npm init -yes
②安装gulp
cnpm install gulp@3 -D //这里的-D表示的是全局安装
可以检测下你安装的gulp版本
gulp --version
③使用插件:gulp.spritesmith
cnpm i gulp gulp.spritesmith -D
④准备项目要处理的图标集
尽量全部使用png格式的图片(我用的是jpg,大家不要在意这些细节)
⑤创建gulpfile.js 文件
//引入gulp
var gulp = require("gulp"),
spritesmith = require('gulp.spritesmith');
gulp.task('default', function () {
return gulp.src('img/*.jpg')//需要合并的所有图片的地址(尽量不要使用非png格式图片,否则可能会报错)
.pipe(spritesmith({
imgName: 'img/sprite.jpg',//最终生成的那一张图片路径位置
cssName: 'css/sprite.css',//对这一张大图片的各个小图标位置和大小描述的css文件路径与位置
padding: 5,//合并时两个图片的间距
algorithm: 'top-down',//图标在合并后的图片上的排列方式
cssTemplate: function (data) { //生成css的模板文件
var arr = [];
data.sprites.forEach(function (sprite) {
arr.push(".icon-" + sprite.name +
"{" +
"background-image: url('" + sprite.escaped_image + "');" +
"background-position: " + sprite.px.offset_x + " " + sprite.px.offset_y + ";" +
"width:" + sprite.px.width + ";" +
"height:" + sprite.px.height + ";" +
"}\n");
});
return arr.join("");
}
}))
.pipe(gulp.dest('dist/')); //css和雪碧图生成的位置
});
⑥运行gulp任务
gulp default
压缩成功
⑦调用
首先先上整个文件夹的结构
使用雪碧图,这里是每个图片在雪碧图的位置信息
创建index.html文件