Gulp.spritesmith can't work with images created dynamically

[Finesse]

Gulp.spritesmith should open input images from stream but it tries to open them from disk. For example, this:

var spriteData = gulp.src('.src/sprites/somePicture.svg')
    .pipe(svg2png())  // Converts svg image to png and passes to next plugin without saving on disk
    .pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css'
    }));

Causes error: Error: ENOENT, open './src/sprites/somePicture.png'.

[twolfson]

This is caused by the underlying architecture of spritesmith. Most engines wouldn't support input images streaming in (e.g. phantomjssmith loads images from disk as if we are in a browser, gmsmith has no way to differentiate when an image starts/stops via stdin).

That being said, the current error message is definitely cryptic and we should error out when we see a stream instead. Additionally, it would be nice to support streaming on those select engines that could (e.g. pixelsmith, canvassmith via data URIs maybe).

For your case, I suggest using a workaround for now:

// Define a task to convert SVGs to PNGs
gulp.task('convert-svg2png', function () {
  return gulp.src('.src/sprites/somePicture.svg')
    .pipe(gulp.dest('tmp/svg2png/'));
});

// Define our sprite task which is dependant on SVGs being converted to PNGs
gulp.task('sprite', ['convert-svg2png'], function () {
    var spriteData = gulp.src('tmp/svg2png/*.png')
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.css'
        }));
});

[Finesse]

Thank you. I will do it this ways. It is not cool, but there is no choice.

[webcaetano]

I had the same problem.

[twolfson]

We have finally resolved this issue. In 5.0.0, we have added passing through Vinyl objects to our engines. As with gulp plugins, not all engines will support buffer/streams but some will (e.g. pixelsmith, canvassmith).

For upgrading instructions, please see our "Breaking changes" notes in the README. Thank you for reporting the initial issue =)

https://github.com/twolfson/gulp.spritesmith/tree/5.0.0#breaking-changes-in-500

[Finesse]

Thank you!

[webcaetano]

🎉