Gulp命令自动生成精灵图
文件目录说明
gulpfile.js代码
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
var imagemin = require('gulp-imagemin');
var runSequence = require('run-sequence');
var open = require('gulp-open');
var configs = {
//修改图片位置
spritesSource: 'img/*.png',
spritesMithConfig: {
imgName: 'icons.png',
cssName: 'icons.css',
algorithm: 'binary-tree',
padding: 6,
cssVarMap: function(sprite) {
sprite.name = sprite.name
}
},
spritesOutputPath: 'output/'
}
//总命令
gulp.task('sprite', function(callback) {
runSequence(
'sprite:build',
'sprite:images',
callback
)
});
gulp.task('sprite:build', function () {
var spriteData = gulp.src(configs.spritesSource).pipe(spritesmith(configs.spritesMithConfig));
return spriteData.pipe(gulp.dest(configs.spritesOutputPath));
}); //压缩
gulp.task('sprite:images', function() {
return gulp.src(configs.spritesOutputPath + '/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(imagemin({
interlaced: true,
}))
.pipe(gulp.dest(configs.spritesOutputPath))
});
生成的精灵图和css
生成精灵图的同时,还会生成和原图片同名的css类名,使用起来更加方便。
.icon {
display: inline-block;
} // HTML 使用代码
<i class="icon icon-home"></i>
*/
.icon-card {
background-image: url(icons.png);
background-position: -48px -166px;
width: 30px;
height: 30px;
}
.icon-help {
background-image: url(icons.png);
background-position: 0px -166px;
width: 42px;
height: 42px;
}
.icon-location {
background-image: url(icons.png);
background-position: -192px -166px;
width: 18px;
height: 18px;
}
.icon-money {
background-image: url(icons.png);
background-position: -84px -166px;
width: 30px;
height: 30px;
}
.icon-note {
background-image: url(icons.png);
background-position: -120px -166px;
width: 30px;
height: 30px;
}
.icon-popbg {
background-image: url(icons.png);
background-position: 0px 0px;
width: 630px;
height: 160px;
}
.icon-user {
background-image: url(icons.png);
background-position: -156px -166px;
width: 30px;
height: 30px;
}
Gulp命令自动生成精灵图的更多相关文章
- 使用automake等命令自动生成Makefile文件 (转载)
使用automake等命令自动生成Makefile文件 Linux下编程时,为了方便编译,往往使用Makefile文件自动完成编译,但是Makefile文件本身的书写十分复杂,规则很多.好在Lin ...
- 使用pip命令自动生成项目安装依赖清单
Python项目中经常会带requirements.txt文件,里面是项目所依赖的包的列表,也就是依赖关系清单,这个清单也可以使用pip命令自动生成. pip命令: 1 pip freeze > ...
- sqoop job命令自动生成
批量生成 #!/usr/bin/env python import MySQLdb import datetime import time import os #source database HOS ...
- 使用automake等命令自动生成Makefile文件
参考:http://www.cnblogs.com/njucslzh/archive/2010/04/29/1723320.html
- 如何创建 mapbox 精灵图
前面文章介绍了如何在本地发布OSM数据,并使用 maputnik 自定义 mapbox 格式的地图样式. 在使用 maputnik 配图时,如果想要使用自己的图片作为地图符号,就需要制作精灵图. ma ...
- pip自动生成requirements.txt依赖关系清单
Python项目中经常会带requirements.txt文件,里面是项目所依赖的包的列表,也就是依赖关系清单,这个清单也可以使用pip命令自动生成. pip命令: 1 pip freeze > ...
- 微软Connect教程系列--自动生成增删改查页面工具介绍(二)
本章课程描述了vs2015的三个特点,其中主要将描述在vs2015下面,使用命令自动生成增删改查界面,具体如下: 1.web.config文件不在存在,用config.json替代,以适应支撑vs的插 ...
- Makefile自动生成:cmake
http://blog.csdn.net/pipisorry/article/details/51647073 编辑makefile文件CMakeLists.txt,使用cmake命令自动生成make ...
- 如何利用pip自动生成和安装requirements.txt依赖
在查看别人的Python项目时,经常会看到一个requirements.txt文件,里面记录了当前程序的所有依赖包及其精确版本号.这个文件有点类似与Rails的Gemfile.其作用是用来在另一台PC ...
随机推荐
- N32903系列的基础知识(1)
N32903U1DN使用ARM926EJ-S内核,其内部集成的JPEG编解码器.CMOS摄像头接口.32通道的声音处理单元(SPU).ADC.DAC等不仅可以满足各种的应用需求,还能减少生产方面的物料 ...
- EL表达式各种函数使用大全
引入<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> ...
- poj_2709 贪心算法
poj 2709 painter 题目要求 给定涂料,每套涂料含有3-12种不同的颜色(开始时候给定选用的颜料套的颜色数目),且一套涂料中每种颜色均有50ml.且一套涂料中的任意三种不同的颜色各X m ...
- JavaBean入门及简单的例子
不会编写JavaBean就不是一个Java开发人员. 那么,何谓JavaBean呢? JavaBean是符合某种规范的Java组件,也就是Java类. 它必须满足如下规范: 1)必须有一个零参数的默认 ...
- 单例模式与静态变量在PHP中 (转载)
在PHP中,没有普遍意义上的静态变量.与Java.C++不同,PHP中的静态变量的存活周期仅仅是每次PHP的会话周期,所以注定了不会有Java或者C++那种静态变量. 所以,在PHP中,静态变量的存在 ...
- hdu1024 Max Sum Plus Plus[降维优化好题(貌似以后可以不用单调队列了)]
Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- JQuery 用法总结
1.隐藏与显示,用于div等等 //隐藏id=myTab下的所有li标签 $("#myTab li").hide(); //动画隐藏,1秒内隐藏该对象 $(); //显示class ...
- chrome inspect 离线调试-工具包 怎么使用
1.找到相关目录: C:\Users\当前用户\AppData\Local\Google\Chrome\User Data\Default 2.找到以下文件夹: 1.Application Cache ...
- ThinkPHP做自动登陆及异位或加密COOKIE!
异位或加密方法: /* *登陆如果自动登陆加密 *默认是0解密状态,1是加密 *采用的方法是异位或加密 */ function encrytion($value,$type=0){ $key = md ...
- (转)大数据量下的SQL Server数据库优化
在SQL Server中,默认MDF文件初始大小为5MB,自增为1MB,不限增长,LDF初始为1MB,增长为10%,限制文件增长到一定的数目:一般设计中,使用SQL自带的设计即可,但是大型数据库设计 ...