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的背景定位来显示需要显示的图片部分. 原理 ...
随机推荐
- CSS 奇技淫巧十八招
http://www.tuicool.com/articles/VZneI3 開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...
- 神奇的NOIP模拟赛 T1 LGTB 玩扫雷
LGTB 玩扫雷 在一个n m 的棋盘上,有位置上有雷(用“*” 表示),其他位置是空地(用“.” 表示).LGTB 想在每个空地上写下它周围8 个方向相邻的格子中有几个雷.请帮助他输出写了之后的棋盘 ...
- BinaryWriter
c#里的文件操作 fileInfo dir的一大堆属性不用说 地球人都知道(什么fileName,create() delete()) ,文件系统的概念很好理解的 文件读写也好理解(硬盘到内存 然后再 ...
- SWPFILE实现(增加swap空间)
1.mkdir /var/swap chmod 700 /var/swap(可以不用设置) 2.dd if=/dev/zero of=/var/swap/file bs=1024 count=65 ...
- Deployment failed due to an error in FastDev assembly synchronization.
在编译的时候发生Assembly synchronization error,显示信息为:Deployment failed due to an error in FastDev assembly s ...
- 本周实验的PSP0过程文档
项目计划总结: 日期/任务 听课 编写程序 阅读相关书籍 日总计 周一 110 60 ...
- hdu4417 划分树+二分
//Accepted 14796 KB 453 ms //划分树 //把查询的次数m打成n,也是醉了一晚上!!! //二分l--r区间第k大的数和h比较 #include <cstdio> ...
- PHP安装编译配置参考
编辑安装php的参考配置: ./configure --prefix=/usr/local/php-5.6.8 --with-config-file-path=/usr/local/php-5.6.8 ...
- TVB-Gone 红外编码方法
每次都重新推算一遍,年纪大了还是记录一下吧(硬件版的TV-B-Gone的压缩编码跳过此段往下看) N900上有个TVB-Gone的程序,但是程序的红外编码往往都是对应的国外的电视,好多国产电视都不支持 ...
- ERP存储过程的调用和树形菜单的加载(四)
引用:DAL:System.Data.SqlClient;System.Data; namespace CommTool { public class SqlComm { /// <summar ...