-
Notifications
You must be signed in to change notification settings - Fork 808
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
Comments
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 |
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.
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. |
@alenabdula perfect thanks :) |
@alenabdula Image optimization is included in the next tagged release of Mix. |
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();
} |
@JeffreyWay the above example is what I am attempting to solve as well, essentially a way to
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.) |
@JeffreyWay mix.copy("img/*.*", "public/opt"); but Mix only copies images without any optimization (folder sizes are equal). |
@valh1996 does image optimization work for you? |
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 |
I found this commit too. But yeah it does not any minification on copy. Images sizes are equal before and after. |
@JeffreyWay Could you provide an example on how to setup the img-properly (maybe write a dedicated doc page)? |
I also would like to know how this works, can't seem to get it working. |
Is it possible to disable |
@leo108 How does it take time if it doesn't do anything but copy? |
@decadence mix use the |
@leo108 Thanks. Therefore we can't imagemin arbitrary images? Strange behaviour. |
How do you stop image optimization? |
@arthurkirkosa I have submitted a PR and already been merged, it should be shipped in next release. |
did the job for me... I was most concerned about background url images in css being moved in |
@leo108 how is imagemin activated? (I do not use sass or something). for Now I am just copying files |
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? |
@JeffreyWay if there any way to optimize images which should be copied by mix.copy() with using mix.version() ? |
@JeffreyWay I'm also wondering, how about what @hraboviyvadim said? |
i can not reduce my image file using your code not single file |
As this seems to be a never ending thread, I though I might as well add to the discussion. If anyone is running into the following error:
Try this, it worked for me:
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({
patterns: [
{
from: 'images', // -> the source location (relative to where your webpack.mix.js is located)
to: 'assets/images', // Laravel mix will place this in 'public/assets/images'
},
],
}),
new ImageminPlugin({
test: /\.(jpe?g|png|gif|svg)$/i,
plugins: [
imageminMozjpeg({
quality: 80,
}),
],
}),
],
}); |
@dreammonkey You're a rock star. |
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
The text was updated successfully, but these errors were encountered: