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

[DannyFeliz]

• Laravel Mix Version: 0.11.4
• Node Version: v6.10.0
• NPM Version: 3.10.10
• OS: Windows 7 Ultimate 64x

Description:

When I'm using the version() function, no matter if I'm running in production or not the old versioned files are not been deleted (BTW this is not a Laravel project)

Steps To Reproduce:

Put this setting in the webpack.mix.js

[ankurk91]

Can you delete your bundle folder and re-run npm run dev

[lukepolo]

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

[DannyFeliz]

@lukepolo You're right, I renamed the issue to clarify it

[DannyFeliz]

@ankurk91 the same thing still happen

[ankurk91]

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
   ```json
   "scripts": {
   "predev": "rm -rf public/bundle",
   }

[ruchern-chong]

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

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

[steveheinsch]

Happening on 0.12 on homestead as well

[adiachenko]

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.

[pflirae]

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

[ruchern-chong]

@luunguyenbk Then you should fix it.

[garbinmarcelo]

@adiachenko it's work. thank's

[marvinosswald]

@adiachenko while using rimraff seems to be a good quick fix it shouldn't laravel-mix do it by itself ?

[garbinmarcelo]

Feedback on rimraf:

It works to run command like: npm run dev or prod, but for the npm run watch the same is not deleting the files in my case.

And yes, laravel-mix should do this automatically (_so I believe_) =S

[adiachenko]

@marvinosswald Yes, but it is still a good practice to have rimraff do the cleaning before the build, because you may have remnant files from previous builds in rotation.

[steveheinsch]

@adiachenko I don't want it to clear ALL files. I want it to clear ONLY the ones being processed through mix - like it used to. It shouldn't touch files it's not responsible for.

[adiachenko]

@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.

[ruchern-chong]

@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.

[garbinmarcelo]

@ruchern Does it do the cleaning also when using in npm run watch?

[ruchern-chong]

@marcelogarbin Yes.

[garbinmarcelo]

@ruchern Could you show your package.json and webpack configuration?

[ruchern-chong]

@marcelogarbin I did not use clean-webpack-plugin because I am not doing versioning on development.

[adiachenko]

@marcelogarbin You don't want to explicitly clean the whole directory on watch. Webpack is designed to do partial recompile after a build is started, so you will be looking at all sorts of issues if you use it this way.

clean-webpack-plugin was a nice suggestion, though. May be much cleaner as you don't need to add additional entries to your package.json scripts.

[garbinmarcelo]

@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?

[steveheinsch]

@marcelogarbin Are you executing npm run dev/etc from the cli on your homestead vm? It looks like you're executing it on your host computer, so '/home/vagrant/code/etc' doesn't exist.

[garbinmarcelo]

@steveheinsch I access via ssh the homestead and run the npm run dev/watch. When running on Windows itself, it works accordingly, however I can not execute according to the watch/browserSync, it does not recognize the ip to access via network.

[ruchern-chong]

@marcelogarbin Yeah as @steveheinsch suggested, which platform are you running the command? Windows or Linux? The command has to run on Linux.

[garbinmarcelo]

@ruchern The error happens in Linux (homestead), however on windows it works accordingly, but then I could not synchronize browserfy on my network using Windows. Before with the Gulp it worked normally. I do not know what I'm doing wrong or it's the settings there ..

[jrodalo]

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

[email protected]
-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.

[boydcl]

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.

[garbinmarcelo]

Well then, I'm using Windows 10 + Homestead and it's happening. @jrodalo and @boyd91 spoke it's happening with OSX. With native Linux is normal? Anyone with this system? I believe it's the project with this "mistake".

[pflirae]

With the following setup the problem is present:

[email protected]
-laravel 5.4
-node v6.10.1
-npm 5.0.1
-Windows 10

If I use [email protected], all works fine.
Somethnig got broken when moving to version 0.12, lets hope it can be solved on a future version.

[warrio4]

@ankurk91

1. Let files go in default directories.
   js mix.js('./resources/assets/js/app.js', 'public/js/app.js')

I'm letting the "files go into the default directories" but I still have the same issue.
This is what my webpack.mix.js contains:

const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js/')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .version();
mix.js('resources/assets/js/sap.js', 'public/js')
    .sass('resources/assets/sass/sap.scss', 'public/css')
    .version();

1. Tell npm to delete your bundle folder before building new
   This solution deletes all the compiled files. It doesn't work when I exclusively use npm run watch. because it generates only the modified file and not the rest of files.

[ankurk91]

@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.

[vesper8]

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

[vesper8]

@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..

[ruchern-chong]

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

[warrio4]

@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

[ankurk91]

@warrio4
Agree, clean-webpack-plugin does not delete files on watch when versioning is enabled.

if (mix.inProduction) {
mix.version()
}

Version files conditionally should fix this remaining issue.
Also found this plugin, need to try out

[warrio4]

@ankurk91

if (mix.inProduction) {
mix.version()
}

No this does not solve the issue, because I need mix.version() in development mode. Without it, my browser puts the javascript files in cache and doesn't refresh them :/

[KonradDeskiewicz]

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.

[ruchern-chong]

@warrio4 May I know what is your development platform? macOS or Windows or Linux?

If you're on macOS, use Safari and disable caches in developer's menu. Otherwise, you just have to open the javascript file or css file itself and force refresh.

OR

Turn off cache-control in your local server.

[warrio4]

@ruchern
I'm on Win10 :\
yes, unfortunately, opening "the javascript source in the browser" was my habit before discovering mix.version() which made easier to develop until now.

[ruchern-chong]

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

[adiachenko]

What's the deal with opening sources? There is an option to disable cache in all major browsers. Cache isn't really an issue in development unless you want to work with dev tools closed.

[warrio4]

@adiachenko

What's the deal with opening sources? There is an option to disable cache in all major browsers. Cache isn't really an issue in development unless you want to work with dev tools closed.

For the browsert Chrome, you need to have the devTools open for that.. not ideal fix, but it works better than deleting versioned files manually.

I still think that mix should delete old files.

[vesper8]

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?

[JeffreyWay]

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.

[boydcl]

@JeffreyWay That seems like a much cleaner solution.

Do you know which version we can downgrade to in the meanwhile until 1.0 is released? Laravel's package.json requires 0.* so every npm install / update will introduce this bug.

[ruchern-chong]

@boyd91 0.11.4 is the most stable at the moment.

[younus93]

I still have the problem. Is there any workaround to this? npm run watch is generating a lot of app.hash.js files and the older ones are not getting deleted. As said by a few others above, PhpStrom becomes sluggish and all of a sudden I have to push a lot of js files to git.

[elastisteve]

@younus93 Where are these hash.js files located? I can't find any on my install. I had a massive problem before updating to mix 1.* and was shocked to see my server running out of disk space until I realized it was all the files piling up from Mix and pushing with Git to the live server! Took me a while to figure out that it was Mix causing all of this. But now since I updated to the latest Mix version I can't see any non-deleted files. Maybe I'm looking in the wrong place, but I think it's solved for me.

[boydcl]

@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]

how can I update to the latest version of laravel-mix?
I've tried npm install laravel-mix but it didn't update my package.json file. I still have the following:

"devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
},

I tried to manually change to "laravel-mix": "1.*" then run composer dump-autoload then run npm run watch, I receive the following error
error in ./resources/assets/js/components/search/result-options.vue

Module build failed: Error:
Vue packages version mismatch:
- [email protected]
- [email protected]

[elastisteve]

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)

[gtempesta-pixartprinting]

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.