雪碧图: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 制作雪碧图的更多相关文章

  1. 使用Compass制作雪碧图

    遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...

  2. 利用compass制作雪碧图

    compass是什么?是sass一款神奇插件,具体教程,我还是推荐阮一峰sass,compass教程,简单清晰明了. 用ps制作雪碧图,工作效率太低了.用compass来制作,方便很多.下图的用com ...

  3. Photoshop制作雪碧图技巧

    雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方. 雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: a.使用Photosho ...

  4. 简单的使用gulp生成雪碧图

    有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一 ...

  5. Sass和Compass制作雪碧图

    1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...

  6. sass制作雪碧图

    1.配置文件config.rb http_path = "../../../" css_dir = "Content/css" sass_dir = " ...

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

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

  8. gulp填坑记(二)——gulp多张图片自动合成雪碧图

    为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...

  9. Css雪碧图

    Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...

随机推荐

  1. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

  2. 神奇的NOIP模拟赛 T1 LGTB 玩扫雷

    LGTB 玩扫雷 在一个n m 的棋盘上,有位置上有雷(用“*” 表示),其他位置是空地(用“.” 表示).LGTB 想在每个空地上写下它周围8 个方向相邻的格子中有几个雷.请帮助他输出写了之后的棋盘 ...

  3. BinaryWriter

    c#里的文件操作 fileInfo dir的一大堆属性不用说 地球人都知道(什么fileName,create() delete()) ,文件系统的概念很好理解的 文件读写也好理解(硬盘到内存 然后再 ...

  4. SWPFILE实现(增加swap空间)

    1.mkdir /var/swap chmod  700  /var/swap(可以不用设置) 2.dd if=/dev/zero of=/var/swap/file bs=1024 count=65 ...

  5. Deployment failed due to an error in FastDev assembly synchronization.

    在编译的时候发生Assembly synchronization error,显示信息为:Deployment failed due to an error in FastDev assembly s ...

  6. 本周实验的PSP0过程文档

    项目计划总结:       日期/任务      听课        编写程序         阅读相关书籍 日总计          周一      110           60         ...

  7. hdu4417 划分树+二分

    //Accepted 14796 KB 453 ms //划分树 //把查询的次数m打成n,也是醉了一晚上!!! //二分l--r区间第k大的数和h比较 #include <cstdio> ...

  8. PHP安装编译配置参考

    编辑安装php的参考配置: ./configure --prefix=/usr/local/php-5.6.8 --with-config-file-path=/usr/local/php-5.6.8 ...

  9. TVB-Gone 红外编码方法

    每次都重新推算一遍,年纪大了还是记录一下吧(硬件版的TV-B-Gone的压缩编码跳过此段往下看) N900上有个TVB-Gone的程序,但是程序的红外编码往往都是对应的国外的电视,好多国产电视都不支持 ...

  10. ERP存储过程的调用和树形菜单的加载(四)

    引用:DAL:System.Data.SqlClient;System.Data; namespace CommTool { public class SqlComm { /// <summar ...