Klathmon / imagemin-webpack-plugin

Plugin to compress images with imagemin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error: Premature end of JPEG file

loooping-old opened this issue · comments

In my build I had the error:

I noticed that the error only occurs in a folder that is more than 1GB

How to skip corrupted files?

Error: Premature end of JPEG file

    at Promise.all.then.arr (/Users/pablo/Workflow/PHP/lamp/www/thesite/node_modules/execa/index.js:231:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)

My Webpack config:

const path = require( 'path' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyPlugin = require('copy-webpack-plugin');

const settings = {
	// The BrowserSync hostname
	host: 'localhost',
	// The port to run BrowserSync's server on
	port: 3000,

  files: [
    './template/**/*.php',
    './content/**/*.php'
  ],

	// A target to proxy all BrowserSync requests to.
	// This can be a local web server, Vagrant or a docker container.
	proxy: 'http://localhost/thesite',

	// If you have your Site URL for WordPress set to anything else other than the proxy address,
	// we need to override all URL. In this example I am overriding my site at http://training-ground.local
	urlOverride: /training-ground\.local/g
};

module.exports = {
	entry: './assets/js/main.js',
	output: {
    filename: 'main.js',
    path: __dirname + "/dist/js"
	},
	devtool: 'source-map',
	module: {
		loaders: [
			// Setup ESLint loader for JS.
			{
				enforce: 'pre',
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'eslint-loader',
				options: {
					emitWarning: true,
				}
			},
			// Run JS through Babel Loader before bundling it to `scripts.js`
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader'
			},
			// Run Sass through loaders before bundling into `style.css`
			{
				test: /\.scss$/,
				enforce: 'pre',
				loader: ExtractTextPlugin.extract( [
					{
						loader: 'css-loader',
						options: {
							minimize: true,
							sourceMap: true
						}
					},
					{
						loader: 'sass-loader'
					}
				] )
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 80000,
              mimetype: "application/font-woff",
              outputPath: "../fonts"
            }
          }
        ]
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: "file-loader"
          }
        ]
      },
      { 
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: "url-loader" 
      }
		]
	},
	plugins: [
		new ExtractTextPlugin( {
			filename: '../css/main.css'
		} ),
		new StyleLintPlugin({ syntax: 'scss' }),
		new UglifyJSPlugin({
      uglifyOptions: {
        mangle: {
          // Skip mangling these
          except: ['$super', '$', 'exports', 'require']
        },
        sourceMap: true
      }
    }),
		new BrowserSyncPlugin({
			host: settings.host,
      port: settings.port,
      files: settings.files,
			proxy: settings.proxy,
			rewriteRules: [
				{
					match: settings.urlOverride,
					fn: function (req, res, match) {
						return settings.host + ':' + settings.port;
					}
				}
			]
    }),
    new CopyPlugin([{
      from: './assets/images/',
      to: '../images/'
    }]),
    new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
	]
}

Replace the ImageminPlugin part of your webpack config with this below:

new ImageminPlugin({
  maxConcurrency: 1,
  test: function (filename) { 
    console.log('Attempting to compress "' + filename + '"...')
    return (/\.(jpe?g|png|gif|svg)$/i).test(filename)
  }
})

When you run that, it should console.log each image that it is minifying as it minifies it. (it will take much longer because I set maxConcurrency to 1, but that is just for this test)

Then can you post the image that it logs right before failing so I can see it?

If it's really just a corrupted JPEG image, then this plugin won't give you any easy way to stop that right now. I might be able to make a change that catches errors like that and just puts the original image through, but I won't have time to do that for a little bit. (if you are willing, I'd gladly accept a PR to this plugin that does that!)

You might also be able to use copy-webpack-plugin's transform property to check that the JPEG is valid, and try to either fix or remove any broken/corrupted images before they get to this plugin.