gulp-css-spriter 将css代码中的切片图片合并成雪碧图
NPM地址:https://www.npmjs.com/package/gulp-css-spriter/
配置gulpfile.js:
var gulp = require('gulp'),
minifyCSS = require('gulp-minify-css'),
spriter = require('gulp-css-spriter'); gulp.task('css', function() { var timestamp = +new Date();
//需要自动合并雪碧图的样式文件
return gulp.src('./src/css/style.css')
.pipe(spriter({
// 生成的spriter的位置
'spriteSheet': './dist/images/sprite'+timestamp+'.png',
// 生成样式文件图片引用地址的路径
// 如下将生产:backgound:url(../images/sprite20324232.png)
'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png'
}))
.pipe(minifyCSS())
//产出路径
.pipe(gulp.dest('./dist'));
});
技巧 :
gulp-css-spriter默认会对样式文件里,所有的background/background-image的图片合并,
但实际项目中,我们不是所有的图片都需要合并。
background-image: url(../slice/p1-3.png?__spriter);//有?__spriter后缀的合并
background-image: url(../slice/p-cao1.png); //不合并
修改下面文件可以按需合并。
node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js
48行开始的if-else if代码块中,替换为下面代码:
// background-image always has a url 且判断url是否有?__spriter后缀
if(transformedDeclaration.property === 'background-image' && /\?__spriter/i.test(transformedDeclaration.value)) { transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
return cb(transformedDeclaration, declarationIndex, declarations);
}
// Background is a shorthand property so make sure `url()` is in there 且判断url是否有?__spriter后缀
else if(transformedDeclaration.property === 'background' && /\?__spriter/i.test(transformedDeclaration.value)) { transformedDeclaration.value = transformedDeclaration.value.replace('?__spriter','');
var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value); if(hasImageValue) {
return cb(transformedDeclaration, declarationIndex, declarations);
}
}
如图:
执行效果:
gulp-css-spriter 将css代码中的切片图片合并成雪碧图的更多相关文章
- gulp多张图片自动合成雪碧图
相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项 ...
- grunt-css-sprite css 代码中的切片合并
安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- 【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- CSS中的背景、雪碧图、超链接的伪类样式
一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...
- css 雪碧图 及jquery定位代码
无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...
随机推荐
- Nginx 设置临时维护页面
Nginx 设置临时维护页面 http://www.myexception.cn/open-source/1753957.html http://blog.justwd.net/snippets/ng ...
- 005-spring cache-配置缓存存储
一.概述 缓存抽象提供了多种存储集成.要使用它们,需要简单地声明一个适当的CacheManager - 一个控制和管理Caches的实体,可用于检索这些实体以进行存储. 1.1.基于JDK Concu ...
- HDU2588:GCD(欧拉函数的应用)
题目链接:传送门 题目需求:Given integers N and M, how many integer X satisfies 1<=X<=N and (X,N)>=M.(2& ...
- dns之缓存。
1.浏览器缓存.这里以chrome为例.在chrome上输入:chrome://net-internals/#dns 可以查看chrome浏览器的dns缓存信息. 这样. 2.windows系统缓存. ...
- hdu 5017
好恶心的题 #include <cstdio> #include <string.h> #include <algorithm> #include <cmat ...
- EditPlus 4.3.2477 中文版已经发布(11月3日更新)
新的版本修复了之前版本文本库和自动完成功能中的“^!”符号在填充项前面时不能正常工作的问题.
- ng-深度学习-课程笔记-12: 深度卷积网络的实例探究(Week2)
1 实例探究( Cast Study ) 这一周,ng对几个关于计算机视觉的经典网络进行实例分析,LeNet-5,AlexNet,VGG,ResNet,Inception. 2 经典网络( Class ...
- eclipse如何设置编译后target目录不提交svn服务器
eclipse设置 windows ->prefrences->team->Ignored Resource 点击Add Pattern 输入 */target/* 等 ...
- wamp server 3.0.0 修改默认浏览器,软件语言和配置文件编辑器
改默认IE浏览器为Chrome: wampmanager.conf : navigator ="C:\Program Files (x86)\Google\Chrome\Applicatio ...
- 20145330 《网络对抗》逆向及BOF基础实践
20145330 <网络对抗>逆向及BOF基础实践 1实践说明 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显 ...