Combination of Phantom and not specifying algorithm causes 0 size png to be generated

[jpgough]

Firstly, thanks for an awesome grunt plugin. I had some issues today using this for the first time on Windows with Phantom. I was seeing that the css was generated fine, but the png had zero file size. My task looked like:

classes_sp : {
   src : '<%= css_src_path %>/classes/**/*.png',
   destImg : '<%= css_build_path %>/classes-sprite.png',
   destCSS : '<%= css_build_path %>/classes-sprite.css',
   'engine' : 'phantomjs'
},

By adding in the algorithm as binary-tree, rather than using the default, all of a sudden png files and css generated correctly. Admittedly the sprites were fairly large one 5Mb and one 70Mb (152 images) - which is ridiculous but I was just trying to get something working.

I think if it is related to the size an error stating that files were too large to sprite with the algorithm would be cool - a silent fail makes me a bit nervous to use this in production.

[twolfson]

Interesting, we might have reached an upper limit with the maximum height of the canvas. What is the average image height and width?

phantomjs is not optimized for PNG size and should be piped through grunt task to optimize it (although there is an open issue #46) which is on the same topic.

[jpgough]

Sorry for the crude example, but if you download the latest version of Dojo: http://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1.zip then add in the build files below in you'll hopefully see how adding the algorithm ('algorithm': 'binary-tree') solves the problem:

package.json

{
  "name": "Problem",
  "version": "0.0.1",
  "description": "Issue 47",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "James Gough",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-spritesmith": "~1.11.3",
    "grunt-sprite-generator": "0.0.2"
  }
}

Gruntfile.js

module.exports = function(grunt) {
    grunt
            .initConfig({
                pkg : grunt.file.readJSON('package.json'),

                sprite : {
                    dojo_sp : {
                        src : '**/*.png',
                        destImg : 'dojo-release-sprite.png',
                        destCSS : 'dojo-release-sprite.css',
                        'engine' : 'phantomjs'
                    }
                }
            });

    grunt.loadNpmTasks('grunt-spritesmith');

    grunt.registerTask('default', [ 'sprite' ]);
};

[twolfson]

No worries, any example is much better than no example =)

I will take a look at this by the end of the week.

[twolfson]

As a heads up, #46 has been resolved which means if you upgrade to the latest minor (1.12.0), then you will see a significant drop in file size.

I might take a look at your issue tonight but it is starting to get late.

[jpgough]

Thanks for the heads up, I'll give the minor version a go. No rush on looking at my issues, as there's a valid workaround - thanks for taking a look.

[twolfson]

I have taken a look but I am unable to reproduce. I am seeing an 83kB CSS and 176MB png. I tossed the work into a gist

https://gist.github.com/twolfson/7446850

[twolfson]

The newer version of spritesmith generates a 871kB png. It does take a lot longer to generate the file but that is due to a flaw in spritesmith; everything is buffer to memory instead of streamed out.

[jpgough]

What OS did you try it on? Is there anything else I can do on my side to try get a more reproducible example? If not I'm happy to close this as it could just be my dev machine.

[twolfson]

I am running Linux Mint 14. What are you running?

I am going to try pushing PhantomJS to its limits by adding more and more sprites.

[jpgough]

Sadly here I'm on Windows 7.

[twolfson]

Ah, cool. I can fire up a VM to see if I can reproduce.

[jpgough]

Thanks, sorry I meant to write it in the issue - user fail :).

[twolfson]

Interesting conclusion to the canvas case, it seems I run out of memory when I double up on the sprites

$ grunt sprite
Running "sprite:dojo_sp" (sprite) task
FATAL ERROR: JS Allocation failed - process out of memory

[twolfson]

Okay, I have successfully reproduced on Windows 7.

[twolfson]

Interstingly enough, you seem to have leapfrogged another Windows specific error. Writing out 200 of those sprites leads to an EINVAL error. That seems to be from trying to write too much of file synchronously to disk.

[twolfson]

Okay, the issue seems to be in phantomjssmith, the phantomjs engine. We are emitting 245515298 bytes of data which is too damn much for node to allow. As a result, it seems to be dropping it all =(

I don't have time to patch this tonight but I will leave it open for later.

[jpgough]

I saw this one too:
Fatal error: libpng error: Invalid IHDR data
But haven't had time to weed out whether there is a dodgy in png or not yet, and is probably unrelated to spritesmith

[twolfson]

Took another shot at this tonight. I have spent too much time on it and Windows is being very unfriendly.

I am going to leave this as an open issue. I will try to come back to this but for now, I am too frustrated and have other projects to attend to.

[jpgough]

No problem at all, Windows is usually very unfriendly anyway! At least we have a documented workaround here with setting the algorithm explicitly - so definitely more important things to be doing. Thanks for your help to date.

[hite]

i am on windows7. the generated png file and css file are both likely empty.
here is my grunt config.

sprite:{
          all: {
              src: 'style/sprites/*.png',
              destImg: 'style/img/spritesheet.png',
               destCSS: 'style/css/sprites.css'
          }
      },

The png file has zero file size, so it can't be opened by windows image viewer. Css file is below;

/*
Icon classes can be used entirely standalone. They are named after their original file names.
<i class="icon-home"></i>
*/

[twolfson]

@hite Can you run the test suite?

# Clone the repository
git clone https://github.com/Ensighten/grunt-spritesmith
cd grunt-spritesmith

# Install dependencies
npm install

# Run our test suite
npm test

[hite]

@twolfson
Nope. When i run 'npm test', grunt.js file is opened by Notepad.exe. i am looking for why it happened.

Meanwhile, pngparse is not installed correctly i am afraid ,and Npm warn is

npm WARN engine [email protected]: wanted: {"node":"0.8.x"} (current: {"node":"v0.10.2
6","npm":"1.4.3"})

Package canvas is not installed too, but i don't think that Canvas is neccesary when pngparser engine is default engine

[twolfson]

Ah, that is a legacy issue from still having a [email protected] file for testing. Please run the following before running npm test

DOSKEY grunt=grunt.cmd $*

The errors you are seeing are not critical, feel free to ignore them.

[hite]

@twolfson Thanks your help. It works in another way. i execute 'DOSKEY grunt=grunt.cmd $*', and grunt file is still opened by Notepad(DAMN it) . Anyway i enter into directory src-test , run grunt -v. Test suite is executed step by step until ' sprite:jpg,json task'. The message is

Files: test_files/sprite1.png, test_files/sprite2.jpg, test_files/sprite3.png
Warning: Sorry, the spritesmith engine 'gm' could not be loaded. Please be sure
you have installed it properly on your machine. Use --force to continue.

Aborted due to warnings.

it gets much reasonable becauce i do't install required package indeed.

i will try again after the required packages are installed.

Thx again.

PS：In your location ,it is early morning ,is it?

[twolfson]

Ugh, sorry about that. I dislike having those dependencies in the test suite =(

It is technically early morning but it isn't too late either. Also, I am on break now so my schedule is a bit different.

[twolfson]

That usually means there were no files found. Please run grunt --verbose sprite to see the files resolved via src.

[twolfson]

I would guess it is due to the misspelling of public for your src:

src: "pulic/images/*.png",
TO
src: "public/images/*.png",

[yuanjianhang]

Oh, sorry! I am so stupid!
I really like this plugin.

[ssuvorov]

On mac everything is fine.
On Win7 we use *.png images, engine: 'phantomjssmith', timeout: 30000 and have an issue

Images not loaded within 30 seconds. Timing out script.

Removing timeout option leads to

TypeError: undefined is not a constructor (evaluating 'window.processCommand(params)')

[twolfson]

@ssuvorov It sounds like you are experiencing a separate bug entirely. Please file a separate issue.