How to use spritesmash with seperate .img and .css streams for spritesmith

[Kjaer]

I am using spritesmith gulp plugin to place .scss and .png files in a different location. But couldn't manage the update sass file after cachebusting the sprite image. My task looks below:

var spriteData = gulp.src(["src/images/*.png"])
                             .pipe(plugins.spritesmith({
                                imgName:"mamas_papas_sprite.png",
                                cssName:"_sprite.scss",
                                algorithm:"binary-tree"
                            }));

        var imageStream = spriteData.img
                            .pipe(buffer())
                            .pipe(plugins.imagemin())
                            .pipe(plugins.spritesmash())
                            .pipe(gulp.dest("dist/public/images/"));

        var sassStream = spriteData.css
                            .pipe(gulp.dest("src/styles/"));

[Romanx]

Hi there,

Sorry for the delay in replying. We actually use another project of ours to re-split the streams out. The plugin is called Gulp Hydra.

You would use it like this:

    var sprites = gulp.src(["src/images/*.png"])
        .pipe(spriteSmith({
            imgName:"mamas_papas_sprite.png",
            cssName:"_sprite.scss",
            algorithm:"binary-tree"
        }))
        .pipe(gulpbuffer())
        .pipe(spritesmash())
        .pipe(hydra({
            img: { type: 'ext', filter: ['.png', '.jpg'] },
            css: { type: 'ext', filter: '.scss' }
        }));

    var imageStream = sprites.img
        .pipe(imagemin({
            use: [pngquant(), jpegtran()]
        }))
        .pipe(gulp.dest("dist/public/images/"));

    var cssStream = sprites.css
        .pipe(gulp.dest("src/styles/"));

Hopefully this helps you.

[Kjaer]

this is solved.

thanks.