有一个在线工具: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. Dethe is my Finaunce金融

    英国诗人乔叟Dethe is my Finaunce金融 英语中“金融”在14世纪,金融计算时间价值的手段.就随机结果签约的能力.一个允许转让金融权后的清算.<Lamentation of Ma ...

  2. centos6下redis cluster集群部署过程

    一般来说,redis主从和mysql主从目的差不多,但redis主从配置很简单,主要在从节点配置文件指定主节点ip和端口,比如:slaveof 192.168.10.10 6379,然后启动主从,主从 ...

  3. Docker网络解决方案 - Calico部署记录

    简单来说,实现docker跨主机容器间通信,常用的第三方网络方案是Flannel,Weave,Calico:Flannel会为每个host分配一个subnet,容器从这个subnet中分配ip,这些i ...

  4. Linux运维笔记-日常操作命令总结(2)

    回想起来,从事linux运维工作已近5年之久了,日常工作中会用到很多常规命令,之前简单罗列了一些命令:http://www.cnblogs.com/kevingrace/p/5985486.html今 ...

  5. HDU-6440-费马小定理

    亏我前几天还学数论呢...没有深入研究费马小定理这个东西...做事情一定要静下心来啊... 题目要求满足(m+n)^p=m^p+n^p,要你定义一个封闭的新的加法和乘法运算 我们知道费马小定理中有两种 ...

  6. NumsCount (java)

    package com.home.test;       import java.util.Arrays;       public class NumsCount {       public vo ...

  7. Geekers团队成立日志

    大家好,作为团队的队长,今天在这里非常荣幸能够发表我们团队的第一篇博客,来宣布我们团队的名字:Geekers! Geek,英文中代表“怪人”,随着时代进步Geek被赋予了新的含义——极客!Steve ...

  8. 『编程题全队』Beata阶段项目复审

    小组的名字和链接 优点 缺点,bug 报告(部分包括建议) 最终名次 想不出队名 1. 界面简洁大方2. 有搜索功能 1. 已经完成的活动缺了点提示界面2. 似乎界面有一点点卡顿目标实现:基本实现找到 ...

  9. 使用composer遇到的问题及解决方法

    可以尝试利用composer下载Yii框架,编辑composer.json文件: { "require":{ "yiisoft/yii2":"~2.0 ...

  10. Linux下数据库备份恢复过程

    1. 远程进入Linux服务器. 2. 一般登录的是root用户, 第一步切换到Oracle用户, 命令: su - oracle 3. 查看服务器上面数据库的监听的状况 lsnrctl 之后输入命令 ...