search

twolfson / grunt-spritesmith

Grunt task for converting a set of images into a spritesheet and corresponding CSS variables
MIT License
1.14k stars 92 forks source link

Fatal error: Error while parsing JSON "[object Event] #66

Closed eldrgeek closed 10 years ago

eldrgeek commented 10 years ago

I am getting this error. 

  Fatal error: Error while parsing JSON "[object Event]

My config follows along with two sample tracebacks.

I am converting a large number of .bmp files (over 1000). The error does not appear when the number is around 100. When I increase the number I get an error listing like Error List 1. When I run it with the full 1000 I get a much longer listing, possibly because there are more threads running. Error List 2 is an abbreviated version of the output.

Configuration

sprite:{
      all: {
        src: ['app/img/bitmaps/*.bmp', 'app/img/*.jpg', 'app/img/toolbar/*.png'],
        destImg: 'app/images/spritesheet.png',
        destCSS: 'app/styles/sprites.css',
        padding: 2,
        engine: 'phantomjs',
        algorithm: 'binary-tree',
        timeout: 30000
      }

Error List 1

Fatal error: Error while parsing JSON "[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
Images not loaded within 10 seconds. Timing out script.
".
Unexpected token o

Unexpected token o

Execution Time (2014-02-07 02:59:11 UTC)
sprite:all   11.4s  
100%
Total 11.4s

Error List 2

grunt sprite:all
Running "sprite:all" (sprite) task
Fatal error: Error while parsing JSON "[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
[object Event]

etc, etc, then 

 file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:42 in imagesLoaded
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:107
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/async.js:24
  file:///home/awesomeuser/Apps/NewMULTI/MULTIplex/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/phantomjssmith/lib/scripts/compose.html:36
Images not loaded within 10 seconds. Timing out script.
".
Unexpected token o

Execution Time (2014-02-07 03:00:58 UTC)
sprite:all   14.7s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
Total 14.7s
twolfson commented 10 years ago

As the error messages are indicating, you are running into the 10 second timeout for the phantomjs engine.

Images not loaded within 10 seconds. Timing out script.

The reason we get Unexpected token o is it is attempting to parse [object Object] as JSON and while [ is a valid way to open an array o is not a valid sequitur.

You made a good attempt with the timeout in your configuration but it needs to be inside of imgOpts to be picked up by the engine.

sprite:{
      all: {
        src: ['app/img/bitmaps/*.bmp', 'app/img/*.jpg', 'app/img/toolbar/*.png'],
        destImg: 'app/images/spritesheet.png',
        destCSS: 'app/styles/sprites.css',
        padding: 2,
        engine: 'phantomjs',
        algorithm: 'binary-tree',
        imgOpts: {
          timeout: 30000
        }
      }

https://github.com/Ensighten/grunt-spritesmith/blob/1.21.2/README.md#usage

For reference, the error message will change to match the timeout you have specified.

https://github.com/twolfson/phantomjssmith/blob/0.4.0/lib/scripts/compose.js#L43

Lastly, since the phantomjs engine is taking over 10 seconds, you might want to consider using the gm or canvas engines which are more performant.

https://github.com/Ensighten/grunt-spritesmith/blob/1.21.2/README.md#canvas

eldrgeek commented 10 years ago

Thanks for the fast response.

On Fri, Feb 7, 2014 at 12:17 AM, Todd Wolfson notifications@github.comwrote:

As the error messages are indicating, you are running into the 10 second timeout for the phantomjs engine.

Images not loaded within 10 seconds. Timing out script.

The reason we get Unexpected token o is it is attempting to parse [object Object] as JSON and while [ is a valid way to open an array o is not a valid sequitur.

You made a good attempt with the timeout in your configuration but it needs to be inside of imgOpts to be picked up by the engine.

sprite:{ all: { src: ['app/img/bitmaps/.bmp', 'app/img/.jpg', 'app/img/toolbar/*.png'], destImg: 'app/images/spritesheet.png', destCSS: 'app/styles/sprites.css', padding: 2, engine: 'phantomjs', algorithm: 'binary-tree', imgOpts: { timeout: 30000 } }

https://github.com/Ensighten/grunt-spritesmith/blob/1.21.2/README.md#usage

For reference, the error message will change to match the timeout you have specified.

https://github.com/twolfson/phantomjssmith/blob/0.4.0/lib/scripts/compose.js#L43

Lastly, since the phantomjs engine is taking over 10 seconds, you might want to consider using the gm or canvas engines which are more performant.

https://github.com/Ensighten/grunt-spritesmith/blob/1.21.2/README.md#canvas

Reply to this email directly or view it on GitHubhttps://github.com/Ensighten/grunt-spritesmith/issues/66#issuecomment-34405010 .