laravel-mix-imagemin
laravel-mix-imagemin copied to clipboard
laravel-mix doesn't react to newly added or deleted images while running watch script
laravel-mix doesn't react to newly added images while running watch script.
Here's my webpack.mix.js file.
const mix = require('laravel-mix')
const imageminMozjpeg = require('imagemin-mozjpeg');
require('laravel-mix-copy-watched');
require('laravel-mix-imagemin');
let paths = {
dirs: {
build: './dist'
},
html: {
src: [
'./*.html'
]
},
js: {
src: [
'./node_modules/jquery/dist/jquery.min.js',
'./assets/plugins/*.js',
'./assets/blocks/**/*.js'
],
dest: './dist/js'
},
css: {
src: './assets/styles/style.scss',
dest: './dist/css'
},
images: {
src: './assets/blocks/**/img/*',
dest: './img',
},
fonts: {
src: './assets/fonts',
dest: './dist/fonts',
}
}
mix
.setPublicPath('./dist')
.setResourceRoot('./assets')
.babel(paths.js.src, `${paths.js.dest}/scripts.js`)
.sass(paths.css.src, `${paths.css.dest}/styles.css`)
.options({
processCssUrls: false
})
.imagemin(
{
from: paths.images.src,
to: paths.images.dest,
flatten: true,
},
{
pngquant: {
quality: '89',
},
svgo: {
plugins: [
{removeViewBox: true}
]
},
gifsicle: (
{interlaced: true}
),
plugins: [
imageminMozjpeg({
quality: 89,
progressive: true
})
]
}
)
.copyDirectoryWatched(paths.fonts.src, paths.fonts.dest)
.browserSync({
proxy: false,
server: {
baseDir: './'
},
watch: true,
files: [
paths.html.src
],
})
and package.json
{
"scripts": {
"lint": "prettier --write \"assets/blocks/**/*.scss\" \"assets/styles/**/*.scss\" && stylelint \"assets/blocks/**/*.scss\" \"assets/styles/**/*.scss\" --fix --config ./.stylelintrc-format",
"dev": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"images": "npm run production -- --env.mixfile=images.mix"
},
"dependencies": {
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"gulp-autoprefixer": "^7.0.1",
"gulp-concat": "^2.6.1",
"gulp-pug": "^4.0.1",
"gulp-sass": "^4.0.2",
"npm": "^6.14.4"
},
"browserslist": [
"last 3 versions"
],
"devDependencies": {
"bootstrap": "^4.4.1",
"browser-sync-webpack-plugin": "^2.0.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "5.1.1",
"cross-env": "^7.0.2",
"glob": "^7.1.6",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"jquery": "^3.4.1",
"laravel-mix": "^5.0.4",
"laravel-mix-clean": "^0.1.0",
"laravel-mix-copy-watched": "^2.2.4",
"laravel-mix-imagemin": "^1.0.3",
"node-sass": "^4.14.1",
"prettier": "^2.0.2",
"resolve-url-loader": "^3.1.0",
"rmdir": "^1.2.0",
"sass-loader": "^8.0.2",
"stylelint": "^13.2.1",
"stylelint-at-rule-no-children": "^0.3.1",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.3.0",
"stylelint-media-use-custom-media": "^1.0.0",
"stylelint-order": "^4.0.0",
"stylelint-value-no-unknown-custom-properties": "^2.0.0",
"vue-template-compiler": "^2.6.11"
},
"lint-staged": {
"linters": {
"*.scss": [
"prettier --write",
"stylelint --fix --config ./.stylelintrc-format",
"git add"
]
},
"ignore": []
}
}
When i'm running npm run watch it doesn't react to newly added or deleted images while watching.
Is there a way to fix this?
I think this is not a problem of the plugin here. I would just ask Stackoverflow :)