利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件

Posted SSXfont

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件相关的知识,希望对你有一定的参考价值。

安装依赖

复制代码
yarn add gulp

yarn add gulp.spritesmith


本次依赖的版本是:

"gulp": "^3.9.1"

"gulp.spritesmith": "^6.5.1"
复制代码

 

gulpfile.js的配置

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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 完成小图合成精灵图,并自动输出样式文件的主要内容,如果未能解决你的问题,请参考以下文章

gulp.spritesmith中的路径有什么问题?

gulp.spritesmith

gulp布局构建小结

gulp教程之静态资源压缩

gulp 使用案例

用 gulp.spritesmith 自动化雪碧图