Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No image-min for mix? #426

Closed
mforcer opened this Issue Feb 19, 2017 · 23 comments

Comments

Projects
None yet
@mforcer
Copy link

mforcer commented Feb 19, 2017

not really an issue, but moving to Laravel 5.4/Mix from 5.3/Elixir seems to have killed my image min functionality as it relies on Gulp.

trying to stick with a web pack/mix work flow what are options for automatic image min?

previously I would copy images to resources/images and they would be optimised and copied to public/images.

Thanks

@JeffreyWay

This comment has been minimized.

Copy link
Owner

JeffreyWay commented Feb 22, 2017

I haven't decided yet if we should include image optimization with the default Mix install.

But of course, you can always manually add it in with mix.webpackConfig().

https://github.com/Klathmon/imagemin-webpack-plugin

@JeffreyWay JeffreyWay closed this Feb 22, 2017

@alenabdula

This comment has been minimized.

Copy link

alenabdula commented Mar 18, 2017

I understand this issue has been closed for some time but wanted to leave this here in case anyone is trying to configure image optimization with Laravel Mix.

npm install --save-dev imagemin-webpack-plugin copy-webpack-plugin imagemin-mozjpeg

const { mix } = require('laravel-mix');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const imageminMozjpeg = require('imagemin-mozjpeg');

mix.webpackConfig({
    plugins: [
        new CopyWebpackPlugin([{
            from: 'resources/assets/images',
            to: 'img', // Laravel mix will place this in 'public/img'
        }]),
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            plugins: [
                imageminMozjpeg({
                    quality: 80,
                })
            ]
        })
    ]
});

Hope that helps.
Best,
Alen

@mforcer

This comment has been minimized.

Copy link
Author

mforcer commented Mar 20, 2017

@alenabdula perfect thanks :)

@JeffreyWay

This comment has been minimized.

Copy link
Owner

JeffreyWay commented Mar 20, 2017

@alenabdula Image optimization is included in the next tagged release of Mix.

@valh1996

This comment has been minimized.

Copy link

valh1996 commented Mar 30, 2017

@JeffreyWay

Hello, how do we put the images in version please? I would like to enjoy the cache busting also with pictures :)

My code:

mix.styles([
    'resources/assets/css/custom.css'
  ], 'public/css/all.css');

mix.copy('resources/assets/img/*.*', 'public/img');

if (mix.config.inProduction) {
    mix.version();
}
@ralphschindler

This comment has been minimized.

Copy link
Contributor

ralphschindler commented Apr 7, 2017

@JeffreyWay the above example is what I am attempting to solve as well, essentially a way to

  • mix.copy() images as a glob path
  • make them version capable
  • manifestable (so that the mix() function will write the proper file name during production & non-hashed in local env).

Can you give me some hints as to which direction you plan on going with this? I see that currently, images cannot be handled properly by File.js since the read function encodes as utf-8 and the write function will JSON.stringify() anything that appears as an object body (even if the body is, for example, binary PNG data.)

@decadence

This comment has been minimized.

Copy link

decadence commented Apr 14, 2017

@JeffreyWay
Is image optimization working already?
I use version 0.10.0 and this code:

mix.copy("img/*.*", "public/opt");

but Mix only copies images without any optimization (folder sizes are equal).
What should I do to make it work?

@decadence

This comment has been minimized.

Copy link

decadence commented Apr 15, 2017

@valh1996 does image optimization work for you?

@mforcer

This comment has been minimized.

Copy link
Author

mforcer commented Apr 15, 2017

I got the impression it does it automatically when copied but doesn't appear to be the case.

The code here that added support doesn't indicate that it is actually doing any minification. 115e8f1

This is the package used: https://www.npmjs.com/package/img-loader

@decadence

This comment has been minimized.

Copy link

decadence commented Apr 15, 2017

I found this commit too. But yeah it does not any minification on copy. Images sizes are equal before and after.

@manniL

This comment has been minimized.

Copy link

manniL commented Apr 29, 2017

@JeffreyWay Could you provide an example on how to setup the img-properly (maybe write a dedicated doc page)?

@mijgame

This comment has been minimized.

Copy link

mijgame commented May 5, 2017

I also would like to know how this works, can't seem to get it working.

@leo108

This comment has been minimized.

Copy link
Contributor

leo108 commented May 6, 2017

Is it possible to disable imagemin? it takes more time to do pack action.

@decadence

This comment has been minimized.

Copy link

decadence commented May 6, 2017

@leo108 How does it take time if it doesn't do anything but copy?

@leo108

This comment has been minimized.

Copy link
Contributor

leo108 commented May 6, 2017

@decadence mix use the img-loader to load image files referred by css files, it will call the imagemin to process those image files.

@decadence

This comment has been minimized.

Copy link

decadence commented May 6, 2017

@leo108 Thanks. Therefore we can't imagemin arbitrary images? Strange behaviour.

@arthurkirkosa

This comment has been minimized.

Copy link

arthurkirkosa commented May 23, 2017

How do you stop image optimization?

@leo108

This comment has been minimized.

Copy link
Contributor

leo108 commented May 23, 2017

@arthurkirkosa I have submitted a PR and already been merged, it should be shipped in next release.

@arthurkirkosa

This comment has been minimized.

Copy link

arthurkirkosa commented May 24, 2017

mix.options({
      processCssUrls: false
   });

did the job for me... I was most concerned about background url images in css being moved in images and being compressed

@huglester

This comment has been minimized.

Copy link

huglester commented Jul 17, 2017

@leo108 how is imagemin activated? (I do not use sass or something). for Now I am just copying files

@Levdbas

This comment has been minimized.

Copy link

Levdbas commented Aug 20, 2017

Would be interested in this as well. I would like to know the way to go with this when not all images are included in the scss but I still want to optimize them. Most obvious way would be to give extra options in the copyDirectory function?

@hraboviyvadim

This comment has been minimized.

Copy link

hraboviyvadim commented Oct 11, 2017

@JeffreyWay if there any way to optimize images which should be copied by mix.copy() with using mix.version() ?

@goowikns

This comment has been minimized.

Copy link

goowikns commented Dec 8, 2017

@JeffreyWay I'm also wondering, how about what @hraboviyvadim said?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.