gulp 制作雪碧图
雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法。把合并的图片一次性加载到内存中,需要时只渲染一部分。
我们选择gulp.spritesmith插件。
使用gulp时首先要在指定的任务目录下本地安装 gulp及任务需要的gulp插件。
(1)建立package.json文件,可以手动建立。也可以使用 cnpm init,然后在命令行中写(学用命令行)
(2)在指定的任务目录下本地安装gulp及插件: cnpm install gulp --save
cnpm install gulp.spritesmith --save
(3)新建任务文件 gulpfile.js
然后我们就可以在这个文件里写我们的代码了。
我们将任务取名为 sprite,
合成的素材存在imgs文件夹下:
合成后输出的雪碧图名字为 sprite.png,对应的css为sprite.css
输出的存储路径为result文件夹
- 代码第一版:(没有任何设置,最简单的版本)
效果:
对应的sprite.css
- 然后我们可以进一步控制下输出的样式
第二版代码:
其中,padding表示合并时每个图片的间距
algorithm表示合成时的排列方式(有四种):
cssTemplate引入的是一个.css文件 ,用来设置更多的样式:(#表示循环)csstemplate.css
效果:
对应的sprite.css
gulp 制作雪碧图的更多相关文章
- 使用Compass制作雪碧图
遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...
- 利用compass制作雪碧图
compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...
- Photoshop制作雪碧图技巧
雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方. 雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: a.使用Photosho ...
- 简单的使用gulp生成雪碧图
有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一 ...
- Sass和Compass制作雪碧图
1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...
- sass制作雪碧图
1.配置文件config.rb http_path = "../../../" css_dir = "Content/css" sass_dir = " ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- gulp填坑记(二)——gulp多张图片自动合成雪碧图
为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...
- Css雪碧图
Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...
随机推荐
- undefined reference to typeinfo - C++ error message
undefined reference to typeinfo - C++ error message There are some compiler and loader error message ...
- LTP学习
下载LTP源码和模型文件: https://github.com/linux-test-project/ltp 官方说明文档 http://ltp.readthedocs.org/zh_CN/late ...
- 登陆中session的处理
在学校中的登陆注册使用的普通session存储信息,然后就是根据session中获取user是否拥有来判断是否登陆. 在一次面试中别人问到了我你们项目的登陆session是怎么一个情况,我这样答的话那 ...
- Android获取手机设备识别码(IMEI)和手机号码
最近看了下获取手机设备ID和手机信息以及SIM的信息例子,主要还是借鉴别人的,现在自己写一下,算是巩固加深了,也希望能给大家一个参考 必要的条件还是一部真机,SIM卡或者UIM卡. 首先,在Andro ...
- 移动设备和SharePoint 2013 - 第2部分:设备管道和SharePoint页面模型
博客地址:http://blog.csdn.net/foxdave 原文地址 在该系列文章中,作者展示了SharePoint 2013最显著的新功能概观--对移动设备的支持. 该系列文章: 移动设备和 ...
- 使用变量替换批量部署GoldenGate
GoldenGate运行时允许在参数文件中动态指定一个值,即在参数文件中使用一个变量,而不是一个静态的值,当启动OGG进程时,根据环境动态加载此变量的值,达到在不同环境中,通过变量定义,实现多个环境的 ...
- poj2429 大数分解+dfs
//Accepted 172 KB 172 ms //该程序为随机性算法,运行时间不定 #include <cstdio> #include <cstring> #includ ...
- SQL SERVER中的逻辑读取,物理读取,以及预读的理解
在SQLSERVER查询分析器中,当我们用Set Statistics on 语句来统计SQL语句或者存储过程I/O的时候, SQLSERVER会显示几个概念去词语:逻辑读取,物理读取,预读. 如下: ...
- Mifare Classic Tool(MCT)汉化版
2.0.4 到 2.0.6的更改: 注意:本汉化版本可能不稳定,与此发生的一切后果与作者和汉化者无关. Version : * Bugfix: Fixed crash which occurred i ...
- eclipse中导入一个android工程有The import android cannot be resolved错误怎么办
解决方法: 右键工程→Bulid Path→Configure Build Path... 选择Android,如图,在Project Build Target里面勾选相应的SDK即可 右键工程,pr ...