gulp.spritesmith 精灵图的使用

smartXuxu

已于 2023-09-07 14:45:27 修改

阅读量111

点赞数 1

文章标签： gulp 前端 javascript

于 2023-09-07 14:43:42 首次发布

本文链接：https://blog.csdn.net/qq_38127697/article/details/132737491

版权

使用gulp.spritesmith 生成精灵图

使用步骤：
1、在gulpfile.js的文件中引用：var spritesmith = require(“gulp.spritesmith”);
项目运行 cnpm install gulp.spritesmith
2、具体执行代码：

```
  gulp.task('spriteus',function(){  //任务名称可自定义 这里使用的是 spriteus
    gulp.src('xxx/*.png') //需要合成小图片们的外层文件夹的地址
        .pipe(spritesmith({
            imgName: 'images/xxx.png',//合并后大图的名称
            cssName:'sass/xxx.scss',
            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("app/"))
});
```

3、执行任务：gulp spriteus