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

第一步:去淘宝镜像地址(http://npm.taobao.org/)里安装cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
由于npm安装插件是从国外服务器下载,受网络影响很大,所以我们可以选装淘宝的cnpm
cnpm和npm用法完全一致,只需将命令中npm换为cnpm即可

第二步:使用cnpm 安装gulp

$ cnpm install gulp --save-dev
全局安装gulp:cnpm install gulp -g[全局安装gulp是为了执行gulp任务]
本地安装gulp:cnpm install gulp --save-dev[本地安装gulp则是为了调用gulp插件的功能]

第三步: 安装雪碧图需要的插件:cnpm install --save-dev gulp.spritesmith

(记得package.json文件的生成,由于我的是自动生成的,所以没有使用cnpm init)

第四步:gulpfile.js里面的东西为

第五步:合并你想要的雪碧图

根据gulpfile.js建立对应的文件夹,将小icon放入src/images/中,当然也要建立一个输出sprite图的文件夹dist。
然后运行命令:
$ gulp sprite就可以了
最后看看我的成果

下图就是完整的几行命令行

简单的使用gulp生成雪碧图的更多相关文章

  1. gulp 制作雪碧图

    雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...

  2. 关于vue-eslint自动补全代码,以及自动生成雪碧图

    一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth&quo ...

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

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

  4. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  5. CSS雪碧图自动生成软件

    下载地址 http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码 简单过程 下载 ...

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

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

  7. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  8. compass做雪碧图

    由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...

  9. gulp-css-spriter 雪碧图合成

    一.配置 gulp的雪碧图功能没有grunt那么强大,但是类似功能也支持,功能稍微弱一些,但是也很棒 npm地址:https://www.npmjs.com/package/gulp-css-spri ...

随机推荐

  1. Timer定时执行

    //定时器 public void timeTask(String hh,int n) {//hh="8:30:00",n=12 Timer timer = new Timer() ...

  2. tftp服务、串口工具minicom

    linux下安装tftp服务 参考这位仁兄的经验 确实百度上很多关于配置tftp服务的方法,但是这篇文章的介绍真的是很精简,对于一个刚接触纯linux环境的小白来说是很舒服的一件事. 首先是安装tft ...

  3. Vue中常用的三种传值方式

    父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...

  4. Activiti 用户手册

    https://tkjohn.github.io/activiti-userguide/

  5. 如何根据元素的className获取元素?

    getElementsByClassName()是HTML5 新增的DOM API.IE8以下不支持 我们知道,原生的方法,是getElementById()和getElementsByTagName ...

  6. poj 3694 Network(割边+lca)

    题目链接:http://poj.org/problem?id=3694 题意:一个无向图中本来有若干条桥,有Q个操作,每次加一条边(u,v),每次操作后输出桥的数目. 分析:通常的做法是:先求出该无向 ...

  7. 《spark快速大数据分析》

    第一 概论 1.spark的特点 适用多种不同分布式平台的场景,包括批处理,迭代算法,交互式查询,流处理: spark提供了python,scale,java等接口 2.spark的组件 spark的 ...

  8. Java关于struts2框架

    今天研究了一下struts2框架,我不太喜欢理论的东西,我研究框架更喜欢打断点一步步跟着去看实现的过程.

  9. git worktree 是什么及其使用场景

    先上总结: 在git worktree出现之前, git切换分支前后的文件都只存在在当前文件夹下, git worktree出现之后, 我们可以将分支切换到其他文件夹下 比如如果你的项目有很多个版本分 ...

  10. 非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通过id进行维护与建文件

     非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通 ...