twolfson / gulp.spritesmith

Convert a set of images into a spritesheet and CSS variables via gulp
The Unlicense
1.08k stars 81 forks source link

Outputting wrong format #156

Closed ghost closed 3 years ago

ghost commented 3 years ago

Issue

Version

6.11.0

Error

It creates a _sprite.scss file with the following contents:

{
    "logo": {
        "x": 0,
        "y": 0,
        "width": 512,
        "height": 512,
        "source_image": "/home/leo/CommitHelpr/res/logo.png",
        "image": "res/sprite.png",
        "total_width": 512,
        "total_height": 512,
        "escaped_image": "res/sprite.png",
        "offset_x": 0,
        "offset_y": 0,
        "px": {
            "x": "0px",
            "y": "0px",
            "offset_x": "0px",
            "offset_y": "0px",
            "height": "512px",
            "width": "512px",
            "total_height": "512px",
            "total_width": "512px"
        }
    }
}

Somehow, there are two files with that name: Screenshot from 2021-05-10 10-38-47

My code:

    gulp.task("img", function () {
        const spriteData = gulp.src("../res/**/*.{png,jpe?g,gif}").pipe(
            spritesmith({
                imgName: "sprite.png",
                cssName: "_sprite.scss ",
                imgPath: "res/sprite.png",
            })
        );

        const imgStream = spriteData.img
            .pipe(buffer())
            .pipe(imagemin())
            .pipe(gulp.dest(buildFolder + "/res"));
        console.log(spriteData.css);
        const cssStream = spriteData.css.pipe(gulp.dest("../src/css"));

        return merge(imgStream, cssStream);
    });
twolfson commented 3 years ago
            cssName: "_sprite.scss ",

It looks like there's a trailing space in your cssName so I'm guessing auto-detect doesn't recognize that properly as .scss and is defaulting to JSON. Can you try correcting that to cssName: "_sprite.scss",?

Closing eagerly as question