gulp填坑记(二)——gulp多张图片自动合成雪碧图

为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步。今天这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith。下面一张图来说明他能做什么。

第一步:npm install --save-dev gulp.spritesmith 安装 gulp.spritesmith

第二部:配置gulpfile.js

//引入gulp模块
const gulp=require(‘gulp‘);

//引入雪碧图合成插件
const spritesmith=require(‘gulp.spritesmith‘);
gulp.task(‘spritesmith‘,function(){
	gulp.src(‘src/images/*.png‘)
		.pipe(spritesmith({
			imgName:‘sprite.png‘,//保存合并后的名称
			cssName:‘dest/css/sprite.css‘,//保存合并后css样式的地址
			padding:15,//合并时两个图片的间距
			algorithm:‘binary-tree‘,//注释1
			//cssTemplate:‘dest/css/handlebarsStr.css‘//注释2
			cssTemplate:function(data){             //如果是函数的话,这可以这样写
			   var arr=[];
                       data.sprites.forEach(function (sprite) {
                           arr.push(".icon-"+sprite.name+"{" +"background-image: url(‘"+sprite.escaped_image+"‘);"+"background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+"width:"+sprite.px.width+";"+                     "height:"+sprite.px.height+";"+"}\n");
                          });
                          return arr.join("");
			}
		}))
		.pipe(gulp.dest(‘dest/images‘));
})

  

注释一:

Algorithm 有四个可选值分别为top-down、left-right、diagonal、alt-diagonal、binary-tree

对于如下:

  

注释二:

cssTemplate 是生成css的模板文件可以是字符串也可以是函数。是字符串是对于相对于的模板地址 对于模板文件样式格式是:

{{#sprites}}
.icon-{{name}}{
    background-image: url("{{escaped_image}}");
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{px.height}};
}
{{/sprites}}

  需要要合成的图片:

  

  合成成功:

  

时间: 2024-11-15 08:10:47

gulp填坑记(二)——gulp多张图片自动合成雪碧图的相关文章

gulp多张图片自动合成雪碧图

相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步.今天我给大家带来一个工具,将这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith.下面一张图来说明他能做什么. 看到这个图片介绍,相信大家已经对gulp.spritesmith能做到什么一目了

UiAutomator2.0升级填坑记

UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:[email protected] 更多精彩请直接访问SkySeraph个人站点:www.skyseraph.com 啰嗦 Google Android Developers 在2015年3月就发布了UiAutomator 2.0版本(下文简称U2),而公司的核心产品中用到还是UiAutomator老版本(下文简称U1),业界用U2的也不是很多,虽然有诸多问题和不便(如高版本OS中不支持Remo

minikube windows hyperx填坑记

minikube windows hyperx填坑记 安装了一天半,还是没行,先放弃 开始 minikube start --vm-driver=hyperv --hyperv-virtual-switch=k8svswitch --cpus=4 --memory=4096 --docker-env HTTP_PROXY=http://192.168.31.77:1080 --docker-env HTTPS_PROXY=http://192.168.31.77:1080 --docker-en

简单的使用gulp生成雪碧图

有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一步:去淘宝镜像地址(http://npm.taobao.org/)里安装cnpm. $ npm install -g cnpm --registry=https://registry.npm.taobao.org 由于npm安装插件是从国外服务器下载,受网络影响很大,所以我们可以选装淘宝的cnpm

Django2.1集成xadmin管理后台所遇到的错误集锦,解决填坑(二)

django默认是有一个admin的后台管理模块,但是丑,功能也不齐全,但是大神给我们已经集成好了xadmin后台,我们拿来用即可,但是呢,django已经升级到2.1版本了,xadmin貌似跟不上节奏,那么在集成过程中咱就一步一步填坑吧,这也是一种学习的过程,遇到错误,找到错误的地方,看看django最新升级都修改了那些,去掉了那些,把相应出错的地方替换即可. xadmin源码地址:https://github.com/sshwsfc/xadmin 下载并解压: 我们用到的是xadmin文件夹

技术填坑记

人生就是不断的填坑,再填坑,下面的填坑记录说不定就能帮助你. 1)SQL server 自带发email功能 测试发给我自己,一切看起来正常.发给小组成员,每个人都能收到了,看起来今天终于可以正常下班了. 可是,测试环境(当然会将所有人的邮件都设定为我们测试小组的成员了)发给某种类型的人的时候,程序不工作了.当初使用的update语句是自己编写的,当然不存在邮箱格式错误的可能. 真是百思不得琪姐啊,只好在小组里面找之前踩过坑的同事了解,询问是否碰到过同样的问题,还好的是我们IT人员都没有藏着掖着

Elasticsearch 填坑记

前言 技术的发展日新月异,传统企业数据库Oracle.SqlServer.DB2,Mysql等在今日不断的被各种大厂自研数据库取代,当然也有类似Elasticsearch等优秀的满足海量数据所使用的开源数据库. 我司多个日志审计与态势感知项目中,也没有免俗,选择了Elasticsearch作为我们的日志存储与搜索引擎.关于Elasticsearch基础知识就不做更多介绍了,随便搜索下,有大量的介绍和使用文档. 本文主要介绍我们在多个项目中,使用Elasticsearch过程中,各种填坑记录. 在

Flexbox微信踩坑填坑记

Flexbox的大名很早就有了解过,只是之前一直是开发PC端的页面,对这个东西还不是很敢造次去用.近期的项目是移动端开发,正好,内心一激动,就大大咧咧地开始用flexbox布局了.中间踩过的一些坑,以及将来可能还会踩到的坑,都在这里记录一下. 关于flexbox,有一篇文章讲的还是很透彻的,图文并茂,有兴趣的戳链接了解下.一篇很屌很好的文章 在用flexbox之前,很多人最关心的应该还是兼容性的问题.个人一直觉得,前端程序员的使命,就是要推进终端用户去使用最先进的浏览器.当然,现实是骨感的,我们

支付开发填坑记之微信支付

微信支付,支持的支付方式比较多:有扫码支付,刷卡支付,APP支付和公众号支付.其中,APP和网站上最常用的就是APP支付和公众号支付.前者集成在APP中,后者主要是为微信用户提供了另一种支付方式(需要在微信的内置浏览器中打开页面,再调起微信支付). 微信支付,支持的支付方式比较多:有扫码支付,刷卡支付,APP支付和公众号支付.其中,APP和网站上最常用的就是APP支付和公众号支付.前者集成在APP中,后者主要是为微信用户提供了另一种支付方式(需要在微信的内置浏览器中打开页面,再调起微信支付).