雪碧图: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. undefined reference to typeinfo - C++ error message

    undefined reference to typeinfo - C++ error message There are some compiler and loader error message ...

  2. LTP学习

    下载LTP源码和模型文件: https://github.com/linux-test-project/ltp 官方说明文档 http://ltp.readthedocs.org/zh_CN/late ...

  3. 登陆中session的处理

    在学校中的登陆注册使用的普通session存储信息,然后就是根据session中获取user是否拥有来判断是否登陆. 在一次面试中别人问到了我你们项目的登陆session是怎么一个情况,我这样答的话那 ...

  4. Android获取手机设备识别码(IMEI)和手机号码

    最近看了下获取手机设备ID和手机信息以及SIM的信息例子,主要还是借鉴别人的,现在自己写一下,算是巩固加深了,也希望能给大家一个参考 必要的条件还是一部真机,SIM卡或者UIM卡. 首先,在Andro ...

  5. 移动设备和SharePoint 2013 - 第2部分:设备管道和SharePoint页面模型

    博客地址:http://blog.csdn.net/foxdave 原文地址 在该系列文章中,作者展示了SharePoint 2013最显著的新功能概观--对移动设备的支持. 该系列文章: 移动设备和 ...

  6. 使用变量替换批量部署GoldenGate

    GoldenGate运行时允许在参数文件中动态指定一个值,即在参数文件中使用一个变量,而不是一个静态的值,当启动OGG进程时,根据环境动态加载此变量的值,达到在不同环境中,通过变量定义,实现多个环境的 ...

  7. poj2429 大数分解+dfs

    //Accepted 172 KB 172 ms //该程序为随机性算法,运行时间不定 #include <cstdio> #include <cstring> #includ ...

  8. SQL SERVER中的逻辑读取,物理读取,以及预读的理解

    在SQLSERVER查询分析器中,当我们用Set Statistics on 语句来统计SQL语句或者存储过程I/O的时候, SQLSERVER会显示几个概念去词语:逻辑读取,物理读取,预读. 如下: ...

  9. Mifare Classic Tool(MCT)汉化版

    2.0.4 到 2.0.6的更改: 注意:本汉化版本可能不稳定,与此发生的一切后果与作者和汉化者无关. Version : * Bugfix: Fixed crash which occurred i ...

  10. eclipse中导入一个android工程有The import android cannot be resolved错误怎么办

    解决方法: 右键工程→Bulid Path→Configure Build Path... 选择Android,如图,在Project Build Target里面勾选相应的SDK即可 右键工程,pr ...