search

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

Can't create retina sprite #64

Closed gmclelland closed 9 years ago

gmclelland commented 9 years ago

Hello, I'm trying to create a retina sprite with this gulp task:

gulp.task('sprite-retina', function () {
  var data = gulp.src('src/sprite-bitmap/*.png').pipe(plugins.spritesmith({
    retinaSrcFilter: '*@2x.png',
    imgName: 'sprite-bitmap.png',
    retinaImgName: 'sprite-bitmap@2x.png',
    cssName: '_sprite-bitmap.scss'
  }));
  var imgStream = data.img.pipe(gulp.dest(paths.bitmapsprite.dest));
  var cssStream = data.css.pipe(gulp.dest(paths.bitmapsprite.dest));
  // return merge(imgStream, cssStream);
});

When I run the task, it gives me this error:

assert.js:86
  throw new assert.AssertionError({
        ^
AssertionError: Retina settings detected but 0 retina images were found. We have 6 normal images and expect these numbers to line up. Please double check `retinaSrcFilter`.
    at DestroyableTransform.onEnd [as _flush] (/Users/glenn/websites/_visit.com/public_html/visit/sites/all/themes/visit/node_modules/gulp.spritesmith/lib/gulp-spritesmith.js:153:7)
    at DestroyableTransform.<anonymous> (/Users/glenn/websites/_visit.com/public_html/visit/sites/all/themes/visit/node_modules/gulp.spritesmith/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:135:12)
    at DestroyableTransform.g (events.js:199:16)
    at DestroyableTransform.emit (events.js:129:20)
    at finishMaybe (/Users/glenn/websites/_visit.com/public_html/visit/sites/all/themes/visit/node_modules/gulp.spritesmith/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:371:12)
    at endWritable (/Users/glenn/websites/_visit.com/public_html/visit/sites/all/themes/visit/node_modules/gulp.spritesmith/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:378:3)
    at DestroyableTransform.Writable.end (/Users/glenn/websites/_visit.com/public_html/visit/sites/all/themes/visit/node_modules/gulp.spritesmith/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:356:5)
    at DestroyableTransform.onend (/Users/glenn/websites/_visit.com/public_html/visit/sites/all/themes/visit/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:523:10)
    at DestroyableTransform.g (events.js:199:16)
    at DestroyableTransform.emit (events.js:129:20)

I have copied these images from this repo into my folders: fork.png fork@2x.png github.png github@2x.png twitter.png twitter@2x.png

If I comment out these lines a non retina sprite is produced with the six images:

 retinaSrcFilter: '*@2x.png',
 retinaImgName: 'sprite-bitmap@2x.png',

Any idea as to what is going on? I'm running gulp.spritesmith 4.1.0, npm 2.14.1, and node v0.12.7

gmclelland commented 9 years ago

FYI...I just tried again with the latest version of node 4.1.0 and still the same error.

twolfson commented 9 years ago

The retinaSrcFilter isn't properly aligned with the filepaths to the source images. It should be a glob pattern which is consistent with the one used for gulp.src. The following configuration should resolve the issue:

gulp.task('sprite-retina', function () {
  var data = gulp.src('src/sprite-bitmap/*.png').pipe(plugins.spritesmith({
    retinaSrcFilter: 'src/sprite-bitmap/*@2x.png',
    imgName: 'sprite-bitmap.png',
    retinaImgName: 'sprite-bitmap@2x.png',
    cssName: '_sprite-bitmap.scss'
  }));
  var imgStream = data.img.pipe(gulp.dest(paths.bitmapsprite.dest));
  var cssStream = data.css.pipe(gulp.dest(paths.bitmapsprite.dest));
  // return merge(imgStream, cssStream);
});
gmclelland commented 9 years ago

That worked, thank you so much! It's 1:45am here and I've been trying to figure that out for a long time.