简单的使用gulp生成雪碧图
有一个在线工具: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生成雪碧图的更多相关文章
- gulp 制作雪碧图
雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...
- 关于vue-eslint自动补全代码,以及自动生成雪碧图
一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth&quo ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- css sprite,css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- CSS雪碧图自动生成软件
下载地址 http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码 简单过程 下载 ...
- gulp填坑记(二)——gulp多张图片自动合成雪碧图
为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- compass做雪碧图
由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...
- gulp-css-spriter 雪碧图合成
一.配置 gulp的雪碧图功能没有grunt那么强大,但是类似功能也支持,功能稍微弱一些,但是也很棒 npm地址:https://www.npmjs.com/package/gulp-css-spri ...
随机推荐
- Dethe is my Finaunce金融
英国诗人乔叟Dethe is my Finaunce金融 英语中“金融”在14世纪,金融计算时间价值的手段.就随机结果签约的能力.一个允许转让金融权后的清算.<Lamentation of Ma ...
- centos6下redis cluster集群部署过程
一般来说,redis主从和mysql主从目的差不多,但redis主从配置很简单,主要在从节点配置文件指定主节点ip和端口,比如:slaveof 192.168.10.10 6379,然后启动主从,主从 ...
- Docker网络解决方案 - Calico部署记录
简单来说,实现docker跨主机容器间通信,常用的第三方网络方案是Flannel,Weave,Calico:Flannel会为每个host分配一个subnet,容器从这个subnet中分配ip,这些i ...
- Linux运维笔记-日常操作命令总结(2)
回想起来,从事linux运维工作已近5年之久了,日常工作中会用到很多常规命令,之前简单罗列了一些命令:http://www.cnblogs.com/kevingrace/p/5985486.html今 ...
- HDU-6440-费马小定理
亏我前几天还学数论呢...没有深入研究费马小定理这个东西...做事情一定要静下心来啊... 题目要求满足(m+n)^p=m^p+n^p,要你定义一个封闭的新的加法和乘法运算 我们知道费马小定理中有两种 ...
- NumsCount (java)
package com.home.test; import java.util.Arrays; public class NumsCount { public vo ...
- Geekers团队成立日志
大家好,作为团队的队长,今天在这里非常荣幸能够发表我们团队的第一篇博客,来宣布我们团队的名字:Geekers! Geek,英文中代表“怪人”,随着时代进步Geek被赋予了新的含义——极客!Steve ...
- 『编程题全队』Beata阶段项目复审
小组的名字和链接 优点 缺点,bug 报告(部分包括建议) 最终名次 想不出队名 1. 界面简洁大方2. 有搜索功能 1. 已经完成的活动缺了点提示界面2. 似乎界面有一点点卡顿目标实现:基本实现找到 ...
- 使用composer遇到的问题及解决方法
可以尝试利用composer下载Yii框架,编辑composer.json文件: { "require":{ "yiisoft/yii2":"~2.0 ...
- Linux下数据库备份恢复过程
1. 远程进入Linux服务器. 2. 一般登录的是root用户, 第一步切换到Oracle用户, 命令: su - oracle 3. 查看服务器上面数据库的监听的状况 lsnrctl 之后输入命令 ...