相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面。gulp-css-spriter 让这一切别的更简单了。

本文只介绍gulp-css-spriter的使用,其它相关文章请自行Google了解^_^。

  第一步:

npm install gulp-css-spriter

  第二步:(主要就看三行代码即可,注意:合并之前的html页面里面的标签宽高必须要和背景图宽高一样,且不能用背景定位,否则会出现问题!!!)

gulp.task('html', ['styles', 'scripts'], () => {
var timestamp = +new Date();//定义一个时间戳
return gulp.src('app/*.html')
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))
.pipe($.if('*.css', $.cssSpriter({
// The path and file name of where we will save the sprite sheet
'spriteSheet': './dist/images/sprite'+timestamp+'.png', //这是雪碧图自动合成的图。 很重要
// Because we don't know where you will end up saving the CSS file at this point in the pipe,
// we need a litle help identifying where it will be.
'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png' //这是在css引用的图片路径,很重要
})))
// .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
.pipe($.if('*.html', $.htmlmin({collapseWhitespace: false})))
.pipe(gulp.dest('dist'));
});

  OK,至此你应该已经完成了,但是你可能发现css里面的backgroundimg都被合并了,那就对了gulp-css-spriter默认会对样式文件里,所有的background/background-image的图片合并,但实际项目中,我们不是所有的图片都需要合并。

background-image: url(../images/icon-3.png?__sprite);//有?__sprite后缀的合并
background-image: url(../images/pics1.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 雪碧图合并

原创作者:Jiao Shou

发布时间:2016年10月13日 - 09:20

最后更新:2016年10月13日 - 21:09

原始链接:http://www.cnblogs.com/jiaoshou/p/5955184.html

许可协议:转载本篇文章时请务必以超链接形式标明文章原文链接和作者信息。

扫描二维码,分享此文章

gulp-css-spriter 雪碧图合并的更多相关文章

  1. CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  2. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  3. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  4. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  5. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  6. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  7. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  8. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  9. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

随机推荐

  1. docker部署带mysql数据库连接的.netcore程序

    docker部署带mysql数据库连接的程序和部署普通的程序完全一致 数据库可以是物理机删的mysql,同时也可以是docker里的mysql. 如果是docker中的mysql,配置连接字符串和物理 ...

  2. Linux安装Redis,在测试阶段即make test出现“You need tcl 8.5 or newer in order to run the Redis test”问题解决方案

    Linux安装Redis,在测试阶段即make test出现"You need tcl 8.5 or newer in order to run the Redis test"问题 ...

  3. NetCore3.0实现自定义IOC容器注入

    在之前的ASP.NET MVC实现依赖注入一文中,通过替换默认的ControllerFactory来达到对Controller生命周期的拦截,实现自定义的对象注入,在NetCore3.0中需要重新实现 ...

  4. Electron – 基础学习(3): 项目打包成exe桌面应用 之electron-builder

    前次用 electron-packager 打包成功,这次改用 electron-builder 打包,然后根据项目中实际需要进行选择使用. 第一步:全局安装 electron-builder,便于系 ...

  5. Android埋点方案的简单实现-AOP之AspectJ

    个人博客 http://www.milovetingting.cn Android埋点方案的简单实现-AOP之AspectJ AOP的定义 AOP为Aspect Oriented Programmin ...

  6. 02-flink时间语义 与 Window 基础概念与实现原理

    Flink 多种时间语义对比 Flink 在流应用程序中支持不同的 Time 概念,就比如有 Processing Time.Event Time 和 Ingestion Time.下面我们一起来看看 ...

  7. centos7安装opencv3.4.1(同样适用于最新版本4.2.0)

    安装cmake3: echo '[group_kdesig-cmake3_EPEL]name=Copr repo for cmake3_EPEL owned by @kdesigbaseurl=htt ...

  8. JavaSE学习笔记(12)---线程

    JavaSE学习笔记(12)---线程 多线程 并发与并行 并发:指两个或多个事件在同一个时间段内发生. 并行:指两个或多个事件在同一时刻发生(同时发生). 在操作系统中,安装了多个程序,并发指的是在 ...

  9. 牛客练习赛56 B 小琛和他的学校

    题目链接:https://ac.nowcoder.com/acm/contest/3566/B 思路:一条路可把图分为左右两部分. l_ci, l_peo, r_ci, r_peo, w 分别为左边城 ...

  10. 剑指offer-面试题34-二叉树中和为某一值的路径-二叉树遍历

    /* 题目: 输入一颗二叉树和一个整数,打印从根节点到叶子节点中所有和为该整数的路径. */ /* 思路: 先序遍历,深度遍历. 从树根开始,记录路径之和,遍历到叶子节点,如果和为期望值,则输出. 回 ...