为优化图片,减少请求会把拿到切好的图标图片,通过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}}

  需要要合成的图片:

  

  合成成功:

  

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

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

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

  2. gulp将多张小图自动合成雪碧图

    最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...

  3. gulp填坑记(一)

    gulp是基于Node.js的自动任务运行器.可以自动完成html.image.css和js等文件的检测.检查.合并.压缩.格式化等,并监听文件在改动后重复指定的这些步骤. 一.首先,我全局安装了gu ...

  4. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  5. UiAutomator2.0升级填坑记

    UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sk ...

  6. Android项目开发填坑记-Fragment的onBackPressed

    Github版 CSDN版 知识背景 Fragment在当前的Android开发中,有两种引用方式,一个是 Android 3.0 时加入的,一个是supportV4包中的.这里简称为Fragment ...

  7. Android项目开发填坑记-Fragment的onAttach

    背景 现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写 ...

  8. Android项目开发填坑记-so文件引发的攻坚战

    故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...

  9. minikube windows hyperx填坑记

    minikube windows hyperx填坑记 安装了一天半,还是没行,先放弃 开始 minikube start --vm-driver=hyperv --hyperv-virtual-swi ...

随机推荐

  1. 3-51单片机WIFI学习(开发板8266底层源码介绍)

    上一篇链接  http://www.cnblogs.com/yangfengwu/p/8743502.html 直接上源码:注意源码有两部分,第一部分是一开始的时候写在模块内部的,另一部分是存在手机内 ...

  2. 容器化的 DevOps 工作流

    对于 devops 来说,容器技术绝对是我们笑傲江湖的法宝.本文通过一个小 demo 来介绍如何使用容器技术来改进我们的 devops 工作流. devops 的日常工作中难免会有一些繁琐的重复性劳动 ...

  3. Docker学习笔记 - Docker Compose

    一.概念 Docker Compose 用于定义运行使用多个容器的应用,可以一条命令启动应用(多个容器). 使用Docker Compose 的步骤: 定义容器 Dockerfile 定义应用的各个服 ...

  4. 新概念英语(1-113)Small Change

    Lesson 113 Small Change 零钱 Listen to the tape then answer this question. Who has got some change?听录音 ...

  5. gradle入门(1-5)创建并运行Web应用

    一.使用Gretty运行Web应用 Gretty支持Jetty和Tomcat,它不会被Gradle缺少SLF4J绑定所导致的问题所困扰. 1.配置文件build.gradle buildscript ...

  6. 三十天学不会TCP,UDP/IP网络编程 -- RTT的计算

    欢迎去gitbook(https://www.gitbook.com/@rogerzhu/)看到完整版. 如果对和程序员有关的计算机网络知识,和对计算机网络方面的编程有兴趣,虽然说现在这种“看不见”的 ...

  7. Java面向对象之封装 入门实例(一)

    一.基础概念 (一)面向对象的三大特征:      1.封装         2.继承          3.多态 (二)封装:隐藏实现细节,对外提供公共的访问方式(接口). 封装的体现之一:将属性都 ...

  8. python/ORM操作详解

    一.python/ORM操作详解 ===================增==================== models.UserInfo.objects.create(title='alex ...

  9. wmv12下安装centos7

    第一步:安装软件: vmw版本是12,并在vmw下安装centos为CentOS-7-x86_64-DVD-1708.iso: 第二步:修改vmw虚拟网络配置 1)配置VMnet8 修改ip等信息 点 ...

  10. iOS 同一个workspace下创建多个项目编程

    在iOS开发中,相关联的多个项目可能会放在同一个workspace下进行开发,那习惯了一个项目在一个工作空间下的同学该怎么快速开撸呢? 只需要三步而已! 第一步,先用Xcode在目标目录下创建一个wo ...