Grunt - Fatal error: Ran out of data

Question

Got this weird one on my gruntfile while processing images using spritesmith.. anyone every come across this ?

Heres my gruntfile.. nothing too major but the issue arises when it comes to the sprite generation... im guessing its a memory problem

    module.exports = function(grunt) {

    var globalConfig = { siteName: 'mysite', };

    grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    globalConfig: globalConfig, // my variables inititalized here

    /* WATCH Configuration */

    watch: {
      js: {
        files: ['wp-content/themes/<%= globalConfig.siteName %>/assets/libs/js/plugins/**/*.js','wp-content/themes/<%= globalConfig.siteName %>/assets/js/app.js'],
        tasks: ['concat:dist', 'uglify:dist'],
      },
      sprite: {
        files: ['wp-content/themes/<%= globalConfig.siteName %>/assets/libs/sprite/*.png'],
        tasks: ['sprite:dist'],
      },  
      sass: {
        files: ['wp-content/themes/<%= globalConfig.siteName %>/assets/css/**/*.scss'],
        tasks: ['sass:dist']
      },
      livereload: {
        files: [
          'wp-content/themes/<%= globalConfig.siteName %>/*.html',
          'wp-content/themes/<%= globalConfig.siteName %>/*.php',
          'wp-content/themes/<%= globalConfig.siteName %>/partials/*.php',
          'wp-content/themes/<%= globalConfig.siteName %>/functions/*.php',                                         
          'wp-content/themes/<%= globalConfig.siteName %>/assets/js/*.{js,json}',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/css/**/*.{scss,css}',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/images/*.{png,jpg,jpeg,gif,webp,svg}'
        ],
        options: {
          livereload: true
        }
      }
    },

    /* SASS Configuration */
    sass: { 
      options: {
        sourceMap: true,
        outputStyle: 'compressed',
      },
      dist: {
        files: {
          'wp-content/themes/<%= globalConfig.siteName %>/style.css': 'wp-content/themes/<%= globalConfig.siteName %>/assets/css/main.scss'
        }
      }
    },

    /* UGLIFY Configuration */
    uglify: {
      options: {
        mangle: false
      },
      dist: {
        files: {
          'wp-content/themes/<%= globalConfig.siteName %>/assets/js/production.min.js': ['wp-content/themes/<%= globalConfig.siteName %>/assets/js/production.js']
        }
      }
    },

    /* CONCAT Configuration */
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: [
          'wp-content/themes/<%= globalConfig.siteName %>/assets/libs/js/plugins/modernizr.js',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/libs/js/plugins/html5shiv.js',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/libs/js/plugins/jquery.fancybox.js',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/libs/js/plugins/jquery.fancybox-media.js',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/libs/js/plugins/slick.js',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/libs/js/plugins/jquery.mixitup.js',
          'wp-content/themes/<%= globalConfig.siteName %>/assets/js/app.js'
        ],
        dest: 'wp-content/themes/<%= globalConfig.siteName %>/assets/js/production.js',
      },
    },




    sprite:{
      dist: {
        src:     'wp-content/themes/<%= globalConfig.siteName %>/assets/libs/sprite/*.png',
        dest:    'wp-content/themes/<%= globalConfig.siteName %>/assets/sprite.png',
        destCss: 'wp-content/themes/<%= globalConfig.siteName %>/assets/sprite.css'
      }
    }






      });




      grunt.loadNpmTasks('grunt-sass');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-spritesmith');

      grunt.registerTask('default', ['sass:dist', 'concat:dist', 'uglify:dist','sprite:dist', 'watch'] );
      // grunt.registerTask('dev-watch', ['concat:dist', 'uglify']);

    };

Can you edit your questions and copy/paste the full error output after executing your grunt task with the `verbose` option : `grunt sprite -v` ? — Ivan Gabriele, Jun 17 '16 at 13:49

score 1 · Answer 1 · answered Jun 17 '16 at 13:58

So I decided to do a search for that error and it did indeed spawn from the grunt-spritesmith folder in node_modules.. specifically to the file

  directories/myproject/node_modules/grunt-spritesmith/node_modules/spritesmith/node_modules/pixelsmith/node_modules/get-pixels/node_modules/pngjs/lib/bitmapper.js:

where there is this function:

    function mapImage8Bit(image, pxData, getPxPos, bpp, data, rawPos) { // eslint-disable-line max-params
      var imageWidth = image.width;
      var imageHeight = image.height;
      var imagePass = image.index;
      for (var y = 0; y < imageHeight; y++) {
        for (var x = 0; x < imageWidth; x++) {
          var pxPos = getPxPos(x, y, imagePass);

          for (var i = 0; i < 4; i++) {
            var idx = pixelBppMap[bpp][i];
            if (i === data.length) {

              throw new Error('Ran out of data' +  JSON.stringify(image));
              // throw new Error('Ran out of data');

            }
            pxData[pxPos + i] = idx !== 0xff ? data[idx + rawPos] : 0xff;
          }
          rawPos += bpp; 
        }
      }
      return rawPos;
    }

To get some more info I have commented out the console.log line that originally gave the error and I added one of the function params in and used json.stringify to make the object readable.. it basically just output

Fatal error: Ran out of data r{"width":1,"height":1}

so that told me that it was one of my 1px x 1px images.. turns out it was a png that was only 88bytes that was causing the issue.. not idea why that would break it but im leaving this here in case anyone else comes across it.

Grunt - Fatal error: Ran out of data

1 Answers1