gulp多张图片自动合成雪碧图
相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面。对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步。今天我给大家带来一个工具,将这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith。下面一张图来说明他能做什么。
看到这个图片介绍,相信大家已经对gulp.spritesmith能做到什么一目了然了,其他的不多说,下面说直接实现
前期准备
安装gulp(使用简介)
后台命令安装 gulp插件 :
npm install --save-dev gulp.spritesmith 安装 gulp.spritesmith
Gulpfile.js 文件内容
/引入gulp
var gulp=require("gulp"),
spritesmith=require('gulp.spritesmith'); gulp.task('default', function () {
return gulp.src('images/*.png')//需要合并的图片地址
.pipe(spritesmith({
imgName: 'sprite.png',//保存合并后图片的地址
cssName: 'css/sprite.css',//保存合并后对于css样式的地址
padding:,//合并时两个图片的间距
algorithm: 'binary-tree',//注释1
cssTemplate:"css/handlebarsStr.css"//注释2
}))
.pipe(gulp.dest('dist/'));
});
注释一:
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
var gulp=require("gulp"),
spritesmith=require('gulp.spritesmith'); gulp.task('default', function () { return gulp.src('images/*.png')//需要合并的图片地址
.pipe(spritesmith({
imgName: 'sprite.png',//保存合并后图片的地址
cssName: 'css/sprite.css',//保存合并后对于css样式的地址
padding:,//合并时两个图片的间距
algorithm: 'binary-tree',//注释1
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('dist/'));
});
以上就是实现将css代码中的切片图片合并成雪碧图的实现,有问题的大家可以给我留言
gulp多张图片自动合成雪碧图的更多相关文章
- gulp填坑记(二)——gulp多张图片自动合成雪碧图
为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- 关于vue-eslint自动补全代码,以及自动生成雪碧图
一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth&quo ...
- CSS雪碧图自动生成软件
下载地址 http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码 简单过程 下载 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- gulp-css-spriter 将css代码中的切片图片合并成雪碧图
NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- gulp 制作雪碧图
雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...
随机推荐
- 【转】windows 7系统安装与配置Tomcat服务器环境
原文链接: windows 7系统安装与配置Tomcat服务器环境 工具/原料 jdk-8u51-windows-x64(我的系统是64位系统,32位的请选x86下载)下载地址:http://www. ...
- null的小扩展
注意:JavaScript有6种数据类型,其中是五种基本数据类型,分别是:Undefined.Null.Boolean.Number 和String,还有一种复杂的数据类型Object 使用typeo ...
- C语言中给数组赋随机值
srand和rand两个函数配合可以产生伪随机数序列.rand函数在产生随机数前,需要系统提供的生成伪随机数序列的种子,rand根据这个种子的值产生一系列随机数.如果系统提供的种子没有变化,每次调用r ...
- Android 锁屏状态/锁屏密码等相关
Android 锁屏状态/锁屏密码等相关 开始是在设备管理器方面找方法,但一直不行,可能在公司系统组同事的帮助下,知道KeyguardManager这个类 /** * 当前系统锁屏是否有密码 * @p ...
- HDU 4160 Dolls (最小路径覆盖=顶点数-最大匹配数)
Dolls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...
- perl oracle utf-8 结果匹配中文字符
[oracle@oadb sbin]$ cat s1.pl #!/usr/bin/perl use DBI; use Encode; use HTTP::Date qw(time2iso str2ti ...
- html submit 登录
<!doctype html> <html lang="en"> <head> <meta name="Generator&qu ...
- C# -- 什么是方法签名?
签名指的是返回值和参数. 比如 : public void A ( int p1,int p2){} public void B ( int q1,int q2){} 的签名相同. 而 public ...
- 【linux】arm mm内存管理
欢迎转载,转载时请保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地址:http://www.cnblogs.com/embedded-tzp Csdn博客地址:http:// ...
- Java基础07 包
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经写了一些Java程序.之前的每个Java程序都被保存为一个文件,比如Tes ...