Gulp命令自动生成精灵图
2018-06-24 02:19:32来源:未知 阅读 ()
文件目录说明
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; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:CSS3字体发光效果
- Nginx常用命令,解决你日常运维的烦恼 2019-10-16
- 一种对开发更友好的前端骨架屏自动生成方案 2019-09-08
- CSS3中的顶级命令 2019-08-14
- GIT 常用命令 2018-11-12
- Ruby(或cmd中)输入命令行编译sass 2018-09-18
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash