twolfson/grunt-spritesmith

Retina image count must match non-retina

Closed this issue · 4 comments

I'm running into the following error:

Fatal error: Retina settings detected but 2 retina images were found. We have 0 normal images
and expect these numbers to line up. Please double check `retinaSrcFilter`.

I understand why this check might be in place, but it assumes you always have/want a retina & non-retina version of an image, where I don't in my case.

Any thoughts?

Can you explain your use case further? I am not sure I follow

[Edited original issue for clarity & wrong data.]

I have several assets (icons) designed @1x, but have others (logos) that were designed at @1x & @2x.

Ah, that case makes more sense. grunt-spritesmith supports running different tasks with their own set of options. We recommend 1 task for generating a 1x spritesheet/CSS and another task for 1x and 2x spritesheets/CSS (with retina media queries).

{
  icons: {
    src: 'icons/*.png',
    dest: 'icons-spritesheet.png',
    destCss: 'icons-sprites.css'
  },
  logos: {
    src: 'logos/*.png',
    retinaSrcFilter: 'logos/*-2x.png',
    dest: 'logos-spritesheet-1x.png',
    retinaDest: 'logos-spritesheet-2x.png',
    destCss: 'logos-sprites.css'
  }
}

If you would like to combine the generated CSS, then we suggest using another task (e.g. grunt-contrib-copy):

https://github.com/gruntjs/grunt-contrib-copy

👍 I'd tried something similar before, but without using separate directories, which caused issues. Thanks for the example code…working well now.