前端插件：雪碧图(多图压缩为一张)

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文件