Klathmon / imagemin-webpack-plugin

Plugin to compress images with imagemin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

externalImages.sources won't work with new files added during build process

kayue opened this issue · comments

I am trying to use the ImageminPlugin to compress sprite image generated by SpritesmithPlugin. The SpritesmithPlugin generates two files dist/sprite.[hash].png and dist/sprite.[hash]@2x.png. The [hash] part is a randome string used to clear cache.

The problem

In this case it makes sense to set externalImages.sources to glob.sync('dist/*.png'). The problem is this won't work because it appears glob.sync is called very early, before any plugins execute. So no files is found at this stage.

Right now I have to avoid having [hash] in file name. Example setup:

new SpritesmithPlugin({
    target: {
        // image: path.resolve(__dirname, 'web/dist/sprite.[chunkhash].png'),
        image: path.resolve(__dirname, 'web/dist/sprite.png'),
    },
    retina: '@2x',
    apiOptions: {
        // cssImageRef: '/dist/sprite.[chunkhash].png',
        cssImageRef: '/dist/sprite.png',
    },
}),
new ImageminPlugin({
    externalImages: {
        // sources: glob.sync('web/dist/*.png'),
        sources: ['web/dist/sprite.png', 'web/dist/sprite@2x.png'],
        destination: 'web/dist/images'
    }
})

Suggestion

externalImages.sources should accept a callback that returns an array of files, so that we can call glob just right before ImageminPlugin optimize any image.

First off, This is probably the most in-depth issue I've ever seen for this repo, so bravo!

The change is super easy and I can add that in now, but I'd recommend trying to get SpritesmithPlugin to write it's output files to the webpack asset array instead of writing them to disk itself. Then not only would it work natively with this plugin without needing that sources array, but it's also much faster and easier to do suprisingly enough! Plus then it works with "serving" systems without having to be written to disk at all.

I just added this and cut release 1.5.0

You can use a function for either sources and/or destination which will be invoked at the last possible second.

Thanks for the issue, and thanks for the suggestion!

Thanks for the quick update :)