用 gulp.spritesmith 自动化雪碧图
一、安装nodejs之后,要设置两个环境变量
在 计算机右击属性---高级系统设置---高级---环境变量 打开窗口
新建2个环境变量,它们的值分别是nodejs根目录下的node_modules路径 及npm的路径
1.变量:NODE_PATH 值:D:\www\nodejs\node_modules
2.变量:PATH 值:D:\www\nodejs\npm
二、进入images上一层目录,运行
npm install gulp gulp.spritesmith
三、新建gulpfile.js
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () {
var spriteData = gulp.src('images/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
return spriteData.pipe(gulp.dest('output/'));
});
四、运行命令,在output文件夹 生成 sprite.png 、sprite.css
gulp sprite
用 gulp.spritesmith 自动化雪碧图的更多相关文章
- 简单的使用gulp生成雪碧图
有一个在线工具:https://www.toptal.com/developers/css/sprite-generator.生成雪碧图是极其方便的. 现在呢,我们来试试用gulp来生成雪碧图. 第一 ...
- Css雪碧图
Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- gulp 制作雪碧图
雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...
- gulp多张图片自动合成雪碧图
相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- gulp填坑记(二)——gulp多张图片自动合成雪碧图
为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...
- V4.0到来了,css雪碧图生成工具4.0更新啦
V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/det ...
- gulp-css-spriter 雪碧图合成
一.配置 gulp的雪碧图功能没有grunt那么强大,但是类似功能也支持,功能稍微弱一些,但是也很棒 npm地址:https://www.npmjs.com/package/gulp-css-spri ...
随机推荐
- Ubuntu配置Samba
一.安装Ubuntu samba服务器 $ sudo apt-get install samba $ sudo apt-get install smbclient # Linux客户端测试用 二.创建 ...
- liunx下试用yum进行php及opchache扩展安装
Centos 6.6 环境: php 5.6.29 nginx:1.10.2 1.配置安装包源 # CentOs 6.x rpm -Uvh http://mirror.webtatic.com/yum ...
- js基础 2
- HDU 5784 How Many Triangles
计算几何,极角排序,双指针,二分. 直接找锐角三角形的个数不好找,可以通过反面来求解. 首先,$n$个点最多能组成三角形个数有$C_n^3$个,但是这之中还包括了直角三角形,钝角三角形,平角三角形,我 ...
- Kali Rolling 下利用rtl-sdr跟踪飞机路线
环境 kali rolling 状态:未升级发行版,仅用 "apt-get upgrade " 命令更新了软件 原料 RTL-SDR电视棒一个,芯片是RTL2832U 原理 我国民 ...
- php获取本周周一、周日时间,上周周一、周日时间,本月第一天,本月最后一天,上个月第一天,最后一天时间
权声明:本文为博主原创文章,未经博主允许不得转载. //这个星期的星期一 // @$timestamp ,某个星期的某一个时间戳,默认为当前时间 // @is_return_timestamp ,是否 ...
- 遍历(二)javascript的Foreach语法
原文:http://www.cnblogs.com/Fskjb/archive/2011/03/26/1996165.html 首先,虽然叫foreach语法但关键字还是用for哦,这个语法只是对平时 ...
- MySQL Logs
摘要 一.MySQL日志 1.1 查询日志 1.2 慢查询日志 1.3 错误日志 1.4 二进制日志 一. MySQL日志 MySQL服务器上一共有六种日志:错误日志,查询日志,慢查询日志,二进制日志 ...
- 记2016商大ACM省赛
比赛前三天才得到省赛的非正式参赛名额,总有点哭笑不得,笑的是是我的终究是我的,跑不掉…… 哭的是现在就剩三天了,虽然最近也一直在参加训练赛,但一直是断断续续的,对自己现在的水平并没有太大的信心…… 虽 ...
- 请问如何查询一个APP的Android和iOS下载量?
作者:Jasmine Jiang链接:http://www.zhihu.com/question/28533067/answer/87871598来源:知乎著作权归作者所有,转载请联系作者获得授权. ...