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

Enhancement: optional JSON output #107

Closed CramericaIndustries closed 8 years ago

CramericaIndustries commented 8 years ago

An option to get the sprite information (position, size, filename) in shape of a javascript object/array would be very handy. Background: I'm using gulp and spritesmith (not gulp.spritesmith) to generate a sprite which I'm not using in a HTML website. Therefore I can't use the generated CSS file. I'm putting together a JSON array that contains all the info needed to use the sprite:

[{
  "fileName": "xyz.png"
 ,"x": 10
 ,"y": 10
 ,"w": 200
 ,"h": 150
},{...}]
CramericaIndustries commented 8 years ago

Ah sorry, now I feel embarrassed! Moments after I submitted my feature request I found the gulp.spritesmith cssName: "xyz.json" option, which does exactly what I need (JSON output instead of CSS). Sorry again!

twolfson commented 8 years ago

It looks like you actually want the json_array format (array of objects) instead of the json format (object, keyed by sprite name). To opt into that, use the cssFormat option:

cssName: 'xyz.json',
cssFormat: 'json_array'

https://github.com/twolfson/spritesheet-templates/tree/10.1.4#json_array