laravel-mix: Mix does not delete old versioned files when a new one is generated

@warrio4 Things has changed since my comment. I would suggest to use clean-webpack-plugin

• Install clean-webpack-plugin

npm i clean-webpack-plugin --save-dev

• Update your webpack-mix.js

const mix = require('laravel-mix');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// Your mix setup may goes here
// mix.js(....)

// Add this to very bottom of your webpack-mix.js
mix.webpackConfig({
  plugins: [
    new CleanWebpackPlugin(['./public/js', './public/css', './public/fonts'])
  ]
});

This plugin play nice even in watch mode.

its not that they are getting duplicated, its that mix does not delete old versioned files properly, im having the exact same issue.

@boyd91 0.11.4 is the most stable at the moment.

Install rimraff, then add the following scripts to your package.json:

    "cleanup": "rimraf public/css public/fonts public/images public/js public/mix-manifest.json",
    "predevelopment": "npm run cleanup",
    "prewatch": "npm run cleanup",
    "prehot": "npm run cleanup",
    "preproduction": "npm run cleanup",

This will ensure that aforementioned directories are cleaned before running asset compilation.

I honestly haven’t read this whole thread, but the 1.0 release of Mix changes the way versioning is applied. Monitoring all these hashed file names is confusing, and makes deployment more difficult for some people.

So now, when you do mix.version(), it’ll just apply a md5’d hash of the file’s contents to the query string. Check your compiled mix-manifest.json file to access them using Laravel’s usual mix() function.

So these changes will automatically resolve this issue, because there’s no old file to delete.

agree with @KonradDeskiewicz … why are we all trying to hack a way to resolve this when it was working perfectly fine before and now something broke

@JeffreyWay is it laravel-mix that is now causing this or is it a break coming from one of its dependencies? if it’s laravel-mix, any plans to revert what caused this?

https://github.com/johnagan/clean-webpack-plugin

I recommend using this and configure it in your webpack.mix.js

I always look at the package.json at laravel/laravel: https://github.com/laravel/laravel/blob/master/package.json

Also, it helps to delete the node_modules folder and then run npm install

And make sure you have the latest version of node/npm installed before running it! (LTS is fine)

IMHO it shouldn’t be hacked. It should be fixed to previous state. I’m currently using older version (0.8.9) just to keep things running as desired.

@ankurk91

const mix = require(‘laravel-mix’); const CleanWebpackPlugin = require(‘clean-webpack-plugin’); // Your mix setup may goes here // mix.js(…)

// Add this to very bottom of your webpack-mix.js mix.webpackConfig({ plugins: [ new CleanWebpackPlugin([‘./public/js’, ‘./public/css’, ‘./public/fonts’]) ] });

I did as suggested. Unfortunately, this deletes correctly all the previous files only when watch is run. but on the following builts, nothing is being deleted :\ Same case as vesper8

I know this problem should be fixed by adding the id param instead of the hash, but I’m encountering a similar problem that is not fixed (I’m using Laravel Mix v5.0.7).

Through the webpackConfig method I’m using the splitChunksPlugin from webpack, which reduces duplication between chunks by creating additional chunks when there is enough code in common between modules.

This means that in some cases the total number of dynamically added chunks is different between the dev and the prod environment, because in development files are larger, so it’s easier to share more code between the files.

So the fact that the mix-manifest file is not updating when the build removes files is causing some issues (especially when working with other people) and I’d like to share how I solved the issue.

1. Laravel-Mix-Clean

In order to avoid having more files than needed, I’m deleting all the files at each build. I had to change the folder structure and pass the correct path to the method, but this didn’t cause many issues.

npm install laravel-mix-clean --save-dev

and in the mix file

require('laravel-mix-clean');
// [...]
.clean({
  cleanOnceBeforeBuildPatterns: ['./js/*'],
});

2. Removing the manifest

Having the files in sync was not enough, so I had to remove the manifest file at each new build. In my set-up I have three concurrent builds (each with its own webpack.mix file), so I don’t know which one will finish first.

The solution was to install the del-cli package (which is used internally by the clean-webpack-plugin, which in turn is used by laravel-mix-clean) and to delete the manifest file before each build.

npm install del-cli --save-dev

package.json

"scripts": {
  "clear-manifest": "del-cli public/mix-manifest.json",
  // [...]
  "development": "npm run clear-manifest && concurrently \"npm run css-dev\" \"npm run js-dev\" \"npm run js-dev-modern\"",
}

I hope this helps other people with similar issues.

@younus93 This is fixed in version 1.0, which is already released. Upgrade to fix the issue.

1.0 does no longer create hashed filenames, it just appends a hash as a query param.

@warrio4 I have to do that too. It’s not just you!

@vesper8 For your static/non-generated files, place them in the resources directory and use the mix.copyDirectory() to copy the files while compiling.

@ankurk91 I tried your suggestion and this only cleans the folders when I first run npm run (dev, watch, production)

But on editing files while running ‘npm run watch’ it still continues to pile up the js files

This also had the effect of deleting all my non-generated files that were in those folders…

yep am also having the same problem… caused several problems for me… first I couldn’t push anymore because suddenly I had over 50 large app.js files and I hadn’t picked up on it.

Then my phpstorm started being super sluggish… again because it was indexing 50+ huge minified js files

Finally I found the problem and fixed it… but this is quite a bug that was recently introduced!! Not sure what is causing it exactly but I hope it is patched quickly or else lots of people are gonna have lots of problems

With the following setup the problem is present:

-laravel-mix@0.12.1 -laravel 5.4 -node v6.10.1 -npm 5.0.1 -Windows 10

If I use laravel-mix@0.11.4, all works fine. Somethnig got broken when moving to version 0.12, lets hope it can be solved on a future version.

Same for me. Using the same versions and OS as @jrodalo and also very sure this wasn’t happening before. Or else I would have noticed it in my commits.

I have the same problem with Laravel and I’m sure that this was working some weeks ago. 🤔

-laravel-mix@0.12.1 -laravel 5.4 -node v6.2.0 -npm 5.0.1 -osx

The same happens on another machine with Ubuntu, node v6.3.1 and npm 3.10.3

Steps to reproduce:

1. laravel new test
2. Add .version() to your webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();

1. cd test
2. npm install
3. npm run watch

Now everytime you change your javascript or css files, versioned files have not been deleted.

@adiachenko @ruchern I need help with this…

I do not know what I’m doing wrong, but when I use the npm run watch or watch-poll, my page is not updating correctly. And ends up generating several compiled files, without removing them.

My Settings: package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "prod": "npm run production",
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "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_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.2.3",
    "imagemin-mozjpeg": "^6.0.0",
    "imagemin-webpack-plugin": "^1.4.4",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "purifycss-webpack": "^0.6.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "postcss-discard-comments": "^2.0.4"
  }
}

webpack.mix.js

const { mix } = require('laravel-mix');

// Pacotes de terceiros
const ImageminPlugin     = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin  = require('copy-webpack-plugin');
const imageminMozjpeg    = require('imagemin-mozjpeg');
const CleanWebpackPlugin = require('clean-webpack-plugin');

// Configurações
let config = {
    host:     '192.168.1.80',
    base_url: 'http://admin.dev'
};

mix.webpackConfig({
    plugins: [
        new CleanWebpackPlugin([
            'public/css',
            'public/js',
        ], {verbose: false})
    ],
});

// Disable toast notifications
mix.disableNotifications();

mix.options({
    cleanCss: {
        level: {
            1: {
                specialComments: 'none'
            }
        }
    },
    postCss: [
        require('postcss-discard-comments')({ removeAll: true })
    ],
    purifyCss: false
});

// Tradução Laravel pt-BR - Copia pasta pt-BR para resources/lang
//mix.copyDirectory('vendor/caouecs/laravel-lang/src/pt-BR', 'resources/lang/pt-BR');
// Images - copia pasta para public/images
mix.copyDirectory('resources/assets/images', 'public/images');

// Copia arquivos de terceiros
// Fonts
mix.copy([
    'bower_components/bootstrap/dist/fonts',
    'bower_components/font-awesome/fonts'
], 'public/fonts');

// Compila estilo SASS
mix.sass('resources/assets/sass/style.scss', 'public/css')
   .sass('resources/assets/sass/loginForm_style.scss', 'public/css')
   .sass('resources/assets/sass/responsive.scss', 'public/css');

// Agrupa CSS
mix.styles([
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'bower_components/font-awesome/css/font-awesome.css',
    'bower_components/select2/dist/css/select2.css',
    'bower_components/animate.css/animate.css',
    'bower_components/hover/css/hover.css',
    'bower_components/lity/dist/lity.css',
    'bower_components/SpinKit/css/spinkit.css',
    'bower_components/sweetalert2/dist/sweetalert2.css',
    'bower_components/pretty-checkbox/src/pretty.min.css',
    'public/css/style.*.css',
    'public/css/responsive.*.css'
], 'public/css/app.css')
    // Login
    .styles([
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'bower_components/font-awesome/css/font-awesome.css',
    'bower_components/pretty-checkbox/src/pretty.min.css',
    'public/css/loginForm_style.*.css'
], 'public/css/app_login.css')
    .version();

// Agrupa JS
mix.scripts([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/bootstrap/dist/js/bootstrap.js',
    'bower_components/select2/dist/js/select2.full.js',
    'bower_components/sweetalert2/dist/sweetalert2.js',
    'bower_components/lity/dist/lity.js',
    'bower_components/parallax/deploy/jquery.parallax.js',
    'bower_components/wow/dist/wow.js'
], 'public/js/app.js')
    // Login
    .scripts([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/bootstrap/dist/js/bootstrap.js'
], 'public/js/basic.js')
    .version();

// Comprime imagens quando em produção (npm run prod)
if(mix.config.inProduction) {
    mix.webpackConfig({
        plugins: [
            new CopyWebpackPlugin([{
                from: 'resources/assets/images',
                to: 'images', // Laravel mix will place this in 'public/images'
            }]),
            new ImageminPlugin({
                test: /\.(jpe?g|png|gif|svg)$/i,
                plugins: [
                    imageminMozjpeg({
                        quality: 70,
                    })
                ]
            })
        ]
    });
}

// Version
//mix.version();

// Browserfy
mix.browserSync({
    files: [
        'resources/sass/**/*.*',
        'resources/views/**/*.*',
        'public/css/*.*',
        'public/js/*.*',
        'app/Modules/**/Resources/views/**/*.*'
    ],
    host: config.host,
    proxy: config.base_url,
    port: 3002,
    online: true,
    logConnections: false,
    reloadOnRestart: false,
    notify: false,
    open: false //false, local, external, ui, tunnel
    // injectChanges: true,
});

I’m using Windows 10 + Homestead. When I run the command npm run dev | prod | watch me returns node-sass error. What can it be?

@marvinosswald Instead of rimraff, use clean-webpack-plugin. It’s made specially for webpack and to cleanup directories based on your configuration. @JeffreyWay used it for one of his Laracasts demo.

@steveheinsch I get it. I am not saying Mix shouldn’t fix its issues. I just threw the idea out there, it’s your decision what to do with it.

I have been able to reproduce de problem on versio 0.12.0, on version 0.11.4 all is working fine

Yes, i can reproduce the issue, mix does not delete files if output folder is other than default (public/js).

There are two possible solution for now.

1. Let files go in default directories. js mix.js('./resources/assets/js/app.js', 'public/js/app.js')
2. Tell npm to delete your bundle folder before building new

"scripts": {
 "predev": "rm -rf public/bundle",
}