HassanZahirnia's avatar

Laravel Mix 'npm run watch' recompiles everything every time I change a file

I'm kinda new to Mix. It's been great so far but I don't know why whenever I change one of my source files, It recompiles almost all my assets instead of just recompiling the appropriate modified file.

For example, If I change something in app.js and save it, it somehow detect changes in all of my css files. So I would see something like this in the console

 WAIT  Compiling...                                                                                                                                

 95% emitting                                                                      

 DONE  Compiled successfully in 239ms                                                                                                               

                           Asset     Size  Chunks             Chunk Names

  /fonts/fontawesome-webfont.eot   166 kB          [emitted]  
                    /css/app.css  13.6 kB       0  [emitted]  /js/app
                  /css/fonts.css   123 kB          [emitted]  
                 /css/custom.css  52.8 kB          [emitted]  
       /css/font-awesome.min.css    31 kB          [emitted]  

 + 4 hidden assets
[Browsersync] File event [change] : public/css/app.css
[Browsersync] File event [change] : public/css/fonts.css
[Browsersync] File event [change] : public/css/custom.css
[Browsersync] File event [change] : public/css/font-awesome.min.css

This also happens when I change a css file. It prints a similar output and right after injecting the css code, it refreshes the browser. So it's really annoying and uncomfortable.

This is my webpack.mix.js :

let mix = require('laravel-mix');

mix.disableNotifications()

   .styles([
      './resources/assets/fonts.css'
   ],'./public/css/fonts.css','./public/css')

   .styles([
      './node_modules/animate.css/animate.min.css'
   ],'./public/css/custom.css','./public/css')

   .stylus('resources/assets/stylus/app.styl', 'public/css', {
      use: [
         require('rupture')()
      ]
   }).options({
      postCss: [
         require('lost')()
      ]
   })

   .copy('./node_modules/font-awesome/css/font-awesome.min.css', './public/css/font-awesome.min.css')
   .copy('./node_modules/font-awesome/fonts/*', './public/fonts/')

   .js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/test.js', 'public/js')
   .extract(['vue','lodash', 'jquery']);


if (mix.inProduction()) {
    mix.version();
}else{
    mix.browserSync({
        proxy: 'test.dev',
        ghostMode: false
    });
}

Any help would be appreciated. Also please let me know if I can improve my webpack.mix.js file.

0 likes
9 replies
bashy's avatar

This might be related to browserSync. Have you removed that to check?

HassanZahirnia's avatar

@bashy I just tried that and it did not fix the issue.

This is really weird because the modify timestamp of my destination files gets updated. Why would changing my javascript file for example, make other irrelevant files get modified, thus making npm run watch detect changes and recompile every one of them...?

It's not changing their content, it's just they get touched/modified in some way and that makes npm recompile them.

orlandojoo's avatar

try to use explicit file to monitor. If you only monitor css, browsersync will act as HMR so something like

mix.browserSync({
        proxy: 'test.dev',
        ghostMode: false,
    file: ['pathToCssDir/*.css','otherDirToMonitor']
    });

If you remove all the *.js stuff he will stop refreshing, just injecting new css code

newms87's avatar

I can confirm that Laravel Mix seems to update a bunch of my compliled .js files when I make 1 change to a .scss file.

@bashy Weather or not I am using browsersync, the files' timestamps get updated. I have been monitoring them directly in the filesytem. I change my main .scss file and my app.js file (among a handful of other .js files) timestamp gets updated.

This is what is causing browsersync to reload cause it thinks there have been JS changes when no changes were made. Any fix for this?

FrancoSalcedo's avatar

Hello everyone, I found this solution.

In my case it was because in an .scss file I was calling an image like '../images/hi.png'. Change the ../ for / I mean absolutely and I stop compiling like crazy

regards

1 like
shashank_90's avatar

@FrancoSalcedo I am not getting how. I also have images and fonts with relative path and getting issues how should i change it to absolute and where should i put assets then to use inside the scss?

Please or to participate in this conversation.