Question

在使用spritesmith处理图像时，我的gruntfile上有这个奇怪的一个..每个人都碰到过这个？

继承我的grunt文件..没有什么太重要但是当涉及精灵生成时出现问题...我猜它的内存问题

    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']);

    };

Answer 1

所以我决定搜索那个错误，它确实从node_modules中的grunt-spritesmith文件夹产生..特别是文件

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

这里有这个功能：

    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;
    }

为了获得更多信息，我已经注释掉了最初给出错误的console.log行，我添加了一个函数参数并使用了json.stringify来使对象可读..它基本上只是输出

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

所以告诉我它是我的1px x 1px图像之一..原来这是一个png只有88字节导致问题..不知道为什么会破坏它但是我把这个留在这里以防万一其他人都遇到过它。

Grunt - 致命错误：超出数据范围

1 个答案: