前端优化雪碧图使用说明 #194

Open
kvkens opened this Issue May 8, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@kvkens
Member

kvkens commented May 8, 2017

前端优化雪碧图使用说明

基于gulp-css-spriter修改来达到简便按需使用

背景:开发用友云一号的时候为了优化首页加载时间、首屏加载速度等一系列速度指标,当我们做了压缩svg、png、js、css后,又做了非200检查、cdn缓存时间设置后,就是雪碧图的使用了,当时开发的时候时间紧任务重没有手工去做,后面我来做的时候发现非常繁琐且耗费时间,查询一番故使用此插件,但是由于我们是按需雪碧图加载,原有的插件只是通过注释+meta指令才操作,但是我们是用了less编译css直接无辜过滤掉,所以修改源代码添加几行匹配规则达到目的,参考了fis3的灵感,特地感谢!

1. 安装

  • 安装本地gulpnpm install gulp --save-dev
  • 安装雪碧图优化过的插件npm install gulp-css-spriter-param

2. 配置

  • 配置gulpfile.js修改如下:
    var gulp = require('gulp'),
        spriter = require('gulp-css-spriter-param');


    //处理雪碧图任务
    gulp.task('sprite', function() {
        return gulp.src(['./css/style.css'])
            .pipe(spriter({
                'spriteSheet': './images/spritesheet.png', //这是雪碧图自动合成的图。 很重要
                'pathToSpriteSheetFromCSS': '../images/spritesheet.png' //这是在css引用的图片路径,很重要
            }))
            .pipe(gulp.dest('./css/')); //最后生成出来
    });
  • 修改package.json来配置插件启动
"scripts": {
  "css" : "gulp sprite"
},

3. 使用

  • 新建页面index.html内容如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/style.css">
  <title>css-spiter</title>
</head>
<body>
<div class="wrap">
  <i class="icon icon-01"></i>
  <i class="icon icon-02"></i>
  <i class="icon icon-03"></i>
  <i class="icon icon-04"></i>
  <i class="icon icon-05"></i>
  <i class="icon icon-06"></i>
</div>
</body>
</html>

里面的就是我们要显示的背景小图标的容器

  • 新增样式文件style.css
* {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'microsoft yahei';
}

.wrap {
	width: 1200px;
	height: 700px;
	margin: 0 auto;
	background: #ececec;
}

.icon {
	width: 200px;
	height: 200px;
	display: inline-block;
	margin: 60px 90px;
}

.icon-01 {
	background: url('../images/icon01.png?__sprite') no-repeat;
}

.icon-02 {
	background: url('../images/icon02.png?__sprite') no-repeat;
}

.icon-03 {
	background: url('../images/icon03.png?__sprite') no-repeat;
}

.icon-04 {
	background: url('../images/icon04.png?__sprite') no-repeat;
}

.icon-05 {
	background: url('../images/icon05.png?__sprite') no-repeat;
}

.icon-06 {
	background: url('../images/icon06.png?__sprite') no-repeat;
}

主要观察.icon相关要作为雪碧图合并内容,对应的小图片png存放好

这样打开的时候是会显示一堆可爱的小图标的,但是这样明显请求过多需要使用修改过的插件进行优化

插件会自动寻找?__sprite后缀的图片进行雪碧图制作,这也是核心所在,不写的话会自动忽略

这个时候需要我们来运行npm run css来自动制作雪碧图

便已完毕之后css发生了变化,并且会多出一个图片

* {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'microsoft yahei';
}

.wrap {
	width: 1200px;
	height: 700px;
	margin: 0 auto;
	background: #ececec;
}

.icon {
	width: 200px;
	height: 200px;
	display: inline-block;
	margin: 60px 90px;
}

.icon-01 {
	background: url('../images/spritesheet.png') no-repeat;
	background-position: -0px -0px;
}

.icon-02 {
	background: url('../images/spritesheet.png') no-repeat;
	background-position: -200px -0px;
}

.icon-03 {
	background: url('../images/spritesheet.png') no-repeat;
	background-position: -0px -200px;
}

.icon-04 {
	background: url('../images/spritesheet.png') no-repeat;
	background-position: -200px -200px;
}

.icon-05 {
	background: url('../images/spritesheet.png') no-repeat;
	background-position: -400px -0px;
}

.icon-06 {
	background: url('../images/spritesheet.png') no-repeat;
	background-position: -400px -200px;
}

4. API

请参考原版API本功能只添加后缀名去处理雪碧图.
想执行雪碧图任务在图片后面加载此标记即可?__sprite

xxx.png?__sprite

API

附上为了讲解的试验品
css-spriter.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment