Terminal says file is generated, but no file is generated.

[daviddelusenet]

Hi,

I'm trying to use css-sprite for my projects, but just can't make it work. It doesn't matter what paths I use, I get the same message every time:

Running "css_sprite:sprite" (css_sprite) task File /images/sprite.png created.

But no file is generated. I'm really going crazy here! Even when I use non-existent paths for every option it still gives me this message.

Also, it isn't clear to me if I've to use relative or absolute paths. My gruntfile.js is sitting in /static (so static is in the root) and in the static folder I've a folder 'images', in which a folder 'sprites' exists where the sprite-files I want to use are. So do I need to use:

src: ['/static/images/sprites/', '/static/images/sprites2/']

Or

src: ['/images/sprites/', '/images/sprites2/']

And why doesn't it just give me errors? This isn't helping :(

Hope someone can help me, thanks!

[aslansky]

Paths should be relative to the project root. So in your case something like:

src: ['./images/sprites/', './images/sprites2/']

should work if the images directory is in the same directory as your gruntfile.

And your right error handling needs to be improved.

[daviddelusenet]

Bruh you're the best! Works fine for me now.

Just one question out of curiosity: what does the preceding '.' mean? Because without it, it doesn't work!

For others who need the complete answer, this is what I've in my gruntfile now:

css_sprite: {
  options: {
    'cssPath': '/static/images',
    'processor': 'scss',
    'orientation': 'vertical',
    'margin': 5,
    'retina' : true
  },
  sprite: {
    options: {
      'style': './scss/base/_sprite.scss'
    },
    src: ['./images/sprites*', './images/sprites2/*'],
    dest: './images/sprite'
  }
}

My folder structure is like this (from the root of my project):

• static
  • images
  • sprites
  • sprites2
• gruntfile.js
• scss
  • Base
  • _Sprite.scss

[aslansky]

. (dot) is the current working directory. You could also use ['images/sprites', 'images/sprites2/'].

[aslansky]

I was thinking about this a bit more and have to say that css-sprite does exactly what it's supposed to do. You basically gave it a directory without any image in it. So it did nothing, which is correct. Showing a error message in that case would be wrong, because css-sprite can't really know if the directory is empty by intention or if the user misspelled or did something else wrong. Also keep in mind that the path given to css-sprite is actually just a glob search string, so there is really no good way to check if it's a missing/wrong directory or something else. For more information about globs see https://github.com/isaacs/node-glob#glob-primer.