CupOfTea696 / laravel-mix-imagemin

Laravel Mix imagemin plugin
MIT License
19 stars 14 forks source link

laravel-mix doesn't react to newly added or deleted images while running watch script #12

Open Korveld opened 4 years ago

Korveld commented 4 years ago

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?

nessor commented 3 years ago

I think this is not a problem of the plugin here. I would just ask Stackoverflow :)