安装依赖

yarn add gulp

yarn add gulp.spritesmith

本次依赖的版本是：

"gulp": "^3.9.1"

"gulp.spritesmith": "^6.5.1"

gulpfile.js的配置

const gulp = require("gulp")

// 本实例为完成精灵图的合并

const spritesmith = require("gulp.spritesmith")

gulp.task('sprite',function(){

    gulp.src("images/*.png")

        .pipe(spritesmith({

            imgName:'images/sprite.png', //合并后大图的名称

            cssName:'css/sprite.less',

            padding:2,// 每个图片之间的间距，默认为0px

            cssTemplate:(data)=>{

            // data为对象，保存合成前小图和合成打大图的信息包括小图在大图之中的信息

               let arr = [],

                    width = data.spritesheet.px.width,

                    height = data.spritesheet.px.height,

                    url =  data.spritesheet.image

                // console.log(data)

                data.sprites.forEach(function(sprite) {

                    arr.push(

                        ".icon-"+sprite.name+

                        "{"+

                            "background: url('"+url+"') "+

                            "no-repeat "+

                            sprite.px.offset_x+" "+sprite.px.offset_y+";"+

                            "background-size: "+ width+" "+height+";"+

                            "width: "+sprite.px.width+";"+

                            "height: "+sprite.px.height+";"+

                        "}\n"

                    )

                })

                // return "@fs:108rem;\n"+arr.join("")

                return arr.join("")

            }

        }))

        .pipe(gulp.dest("dest/"))

})

　　

　　

未合并前的效果

小图文件未合并前的效果如下(小图一共40张)

合并之后的效果：图片与less

图片：

less:

.icon-aim{background: url('../images/sprite.png') no-repeat -34px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-behance{background: url('../images/sprite.png') no-repeat 0px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-blogger{background: url('../images/sprite.png') no-repeat 0px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-deviant-art{background: url('../images/sprite.png') no-repeat -34px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-digg{background: url('../images/sprite.png') no-repeat -68px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-dribbble{background: url('../images/sprite.png') no-repeat -68px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-dropbox{background: url('../images/sprite.png') no-repeat 0px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-etsy{background: url('../images/sprite.png') no-repeat -34px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-evernote{background: url('../images/sprite.png') no-repeat -68px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-facebook{background: url('../images/sprite.png') no-repeat -102px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-feed{background: url('../images/sprite.png') no-repeat -102px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-flickr{background: url('../images/sprite.png') no-repeat -102px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-forrst{background: url('../images/sprite.png') no-repeat 0px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-foursquare{background: url('../images/sprite.png') no-repeat -34px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-github{background: url('../images/sprite.png') no-repeat -68px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-google+{background: url('../images/sprite.png') no-repeat -102px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-google{background: url('../images/sprite.png') no-repeat -136px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-instagram{background: url('../images/sprite.png') no-repeat -136px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-last-fm{background: url('../images/sprite.png') no-repeat -136px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-linked-in{background: url('../images/sprite.png') no-repeat -136px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-mail{background: url('../images/sprite.png') no-repeat 0px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-myspace{background: url('../images/sprite.png') no-repeat -34px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-paypal{background: url('../images/sprite.png') no-repeat -68px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-picasa{background: url('../images/sprite.png') no-repeat -102px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-pinterest{background: url('../images/sprite.png') no-repeat -136px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-rdio{background: url('../images/sprite.png') no-repeat -170px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-reddit{background: url('../images/sprite.png') no-repeat -170px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-share-this{background: url('../images/sprite.png') no-repeat -170px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-skype{background: url('../images/sprite.png') no-repeat -170px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-soundcloud{background: url('../images/sprite.png') no-repeat -170px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-spotify{background: url('../images/sprite.png') no-repeat 0px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-stumbleupon{background: url('../images/sprite.png') no-repeat -34px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-tumblr{background: url('../images/sprite.png') no-repeat -68px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-twitter{background: url('../images/sprite.png') no-repeat -102px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-viddlr{background: url('../images/sprite.png') no-repeat -136px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-vimeo{background: url('../images/sprite.png') no-repeat -170px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-wordpress{background: url('../images/sprite.png') no-repeat -204px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-xing{background: url('../images/sprite.png') no-repeat -204px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-yahoo{background: url('../images/sprite.png') no-repeat -204px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-youtube{background: url('../images/sprite.png') no-repeat -204px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

利用gulp 插件gulp.spritesmith 完成小图合成精灵图，并自动输出样式文件的更多相关文章

  1. 利用Maven插件将依赖包、jar/war包及配置文件输出到指定目录

    写在前面 ​ 最近遇到一个朋友遇到一个项目需要将maven的依赖包和配置文件分开打包然后用脚本执行程序.这样的好处在于可以随时修改配置文件内容及查看jar包.如果将所有打成一个jar包就会有个问题(例 ...

  2. 如何编写一个gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...

  3. 【gulp】Gulp的安装和配置 及 系列插件

    注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置 ...

  4. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  5. 送干货，实用内联gulp插件——gulp-embed

    现在npm上有很多gulp内联工具,用于把脚本和样式内嵌到HTML页面上,之前搞项目我也在这些插件中寻觅许久,但均不满足公司项目的一个需求—— HTML上同时插入了开发(dev版,src文件夹下,比如 ...

  6. gulp 插件

    原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...

  7. gulp插件gulp-ruby-sass和livereload插件

    gulp-ruby-sass是gulp的一个插件,主要是用来实现sass编译,livereload插件主要是实现文件保存时浏览器自动刷新,避免了手动f5的频繁的操作 准备工作:chrome浏览器安装l ...

  8. gulp插件autoprefixer

    gulp的autoprefixer插件可以根据我们的设置帮助我们自动补全浏览器的前缀(如:-moz.-ms.-webkit.-o) 1)首先安装gulp,不知道怎么安装请看这里 2)安装autopre ...

  9. gulp插件(gulp-jmbuild)，用于WEB前端构建

    源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...

随机推荐

  1. ConcurrentHashMap 源码阅读小结

    前言 每一次总结都意味着重新开始,同时也是为了更好的开始.ConcurrentHashMap 一直是我心中的痛.虽然不敢说完全读懂了,但也看了几个重要的方法,有不少我觉得比较重要的知识点. 然后呢,放 ...

  2. 呼叫WCF Service的方法出现Method not allowed异常

    asp.net mvc练习程序,经常性在家里电脑,笔记本或是公司的电脑之间拷贝与粘贴,如果忘记携带最新的练习程序,一些小功能只能重新写了.如前一篇<ASP.NET MVC呼叫WCF Servic ...

  3. RDLC报表带搜索与传参数功能演示(ASP.NET MVC)

    昨晚有演示了<ASP.NET MVC应用程序展示RDLC报表>http://www.cnblogs.com/insus/p/3665295.html RDLC报表.在实现过程中,有遇上了诸 ...

  4. 转载ORM--EF框架

    EF4.1有三种方式来进行数据操作及持久化.分别是Database-First,Model-First,Code-first: 1.Database First是基于已存在的数据库,利用某些工具(如V ...

  5. leetcode916

    单词子集 我们给出两个单词数组 A 和 B.每个单词都是一串小写字母. 现在,如果 b 中的每个字母都出现在 a 中,包括重复出现的字母,那么称单词 b是单词 a 的子集. 例如,“wrr” 是 “w ...

  6. 一个很好用的SqlHelper类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. NIO,AIO,BIO

    同步和异步:同步和异步关注的是消息通信机制, 同步:就是在发出一个“调用”时,在没有得到结果之前,该“调用”就不返回,但是一旦调用返回,就得到返回值了;换句话说:就是由“调用者”主动等待“调用”结果 ...

  8. js同时获取多个同name的input框的值

    demo代码 <!doctype html> <html ng-app="a3_4"> <head> <title>表头排序< ...

  9. Python os、sys、pickle、json等模块

    1.os 所有和操作系统相关的内容都在os模块,一般用来操作文件系统 import os os.makedirs('dirname1/dirname2') # 可生成多层递归目录 os.removed ...

  10. HTML（5）基础

    1.html常用标签 <pre>...</pre>:标识预定义文本 <a>是anchor的缩写,<a>标签定义锚点和超链接,<a>常与hre ...