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}}
需要要合成的图片:
合成成功:
gulp填坑记(二)——gulp多张图片自动合成雪碧图的更多相关文章
- gulp多张图片自动合成雪碧图
相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项 ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- gulp填坑记(一)
gulp是基于Node.js的自动任务运行器.可以自动完成html.image.css和js等文件的检测.检查.合并.压缩.格式化等,并监听文件在改动后重复指定的这些步骤. 一.首先,我全局安装了gu ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- UiAutomator2.0升级填坑记
UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.sk ...
- Android项目开发填坑记-Fragment的onBackPressed
Github版 CSDN版 知识背景 Fragment在当前的Android开发中,有两种引用方式,一个是 Android 3.0 时加入的,一个是supportV4包中的.这里简称为Fragment ...
- Android项目开发填坑记-Fragment的onAttach
背景 现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写 ...
- Android项目开发填坑记-so文件引发的攻坚战
故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...
- minikube windows hyperx填坑记
minikube windows hyperx填坑记 安装了一天半,还是没行,先放弃 开始 minikube start --vm-driver=hyperv --hyperv-virtual-swi ...
随机推荐
- 3-51单片机WIFI学习(开发板8266底层源码介绍)
上一篇链接 http://www.cnblogs.com/yangfengwu/p/8743502.html 直接上源码:注意源码有两部分,第一部分是一开始的时候写在模块内部的,另一部分是存在手机内 ...
- 容器化的 DevOps 工作流
对于 devops 来说,容器技术绝对是我们笑傲江湖的法宝.本文通过一个小 demo 来介绍如何使用容器技术来改进我们的 devops 工作流. devops 的日常工作中难免会有一些繁琐的重复性劳动 ...
- Docker学习笔记 - Docker Compose
一.概念 Docker Compose 用于定义运行使用多个容器的应用,可以一条命令启动应用(多个容器). 使用Docker Compose 的步骤: 定义容器 Dockerfile 定义应用的各个服 ...
- 新概念英语(1-113)Small Change
Lesson 113 Small Change 零钱 Listen to the tape then answer this question. Who has got some change?听录音 ...
- gradle入门(1-5)创建并运行Web应用
一.使用Gretty运行Web应用 Gretty支持Jetty和Tomcat,它不会被Gradle缺少SLF4J绑定所导致的问题所困扰. 1.配置文件build.gradle buildscript ...
- 三十天学不会TCP,UDP/IP网络编程 -- RTT的计算
欢迎去gitbook(https://www.gitbook.com/@rogerzhu/)看到完整版. 如果对和程序员有关的计算机网络知识,和对计算机网络方面的编程有兴趣,虽然说现在这种“看不见”的 ...
- Java面向对象之封装 入门实例(一)
一.基础概念 (一)面向对象的三大特征: 1.封装 2.继承 3.多态 (二)封装:隐藏实现细节,对外提供公共的访问方式(接口). 封装的体现之一:将属性都 ...
- python/ORM操作详解
一.python/ORM操作详解 ===================增==================== models.UserInfo.objects.create(title='alex ...
- wmv12下安装centos7
第一步:安装软件: vmw版本是12,并在vmw下安装centos为CentOS-7-x86_64-DVD-1708.iso: 第二步:修改vmw虚拟网络配置 1)配置VMnet8 修改ip等信息 点 ...
- iOS 同一个workspace下创建多个项目编程
在iOS开发中,相关联的多个项目可能会放在同一个workspace下进行开发,那习惯了一个项目在一个工作空间下的同学该怎么快速开撸呢? 只需要三步而已! 第一步,先用Xcode在目标目录下创建一个wo ...