Browsersync reloads my site twice

• Laravel Mix Version: 0.11.3
• Node Version: 7.9.0
• NPM Version: 4.2.0
• OS: Windows 10

Description:

Whenever I use mix.browserSync() my browser gets refreshed twice. Also, If I make a change on my Sass, changes don’t get injected; the browser reloads twice no matter what.

Steps To Reproduce:

This is my webpack.mix.js:

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

mix.options({ processCssUrls: false });
mix.disableNotifications();
mix.setPublicPath('public');

mix.js('resources/assets/js/app.js', 'js')
   .js('resources/assets/js/realtime/a.js', 'js/realtime')
   .js('resources/assets/js/realtime/b.js', 'js/realtime')
   .js('resources/assets/js/realtime/c.js', 'js/realtime');

mix.scripts([
   'resources/assets/js/vendor/a.js',
   'resources/assets/js/vendor/b.js',
   'resources/assets/js/vendor/c.js',
   'resources/assets/js/vendor/d.js',
   'resources/assets/js/vendor/e.js',
   'resources/assets/js/vendor/f.js',
   'resources/assets/js/vendor/g.js',
   'resources/assets/js/general.js'
], 'public/js/all.js');

mix.less('node_modules/spectre.css/spectre.less', 'css/vendor.css');

mix.sass('resources/assets/sass/main.scss', 'css')
   .sass('resources/assets/sass/realtime/a.scss', 'css/realtime')
   .sass('resources/assets/sass/realtime/b.scss', 'css/realtime')
   .sass('resources/assets/sass/realtime/c.scss', 'css/realtime');

if (mix.config.inProduction) {
    mix.version();
} else {
    mix.browserSync({
        proxy: 'app.dev',
        // I also tried this: files: 'public/**/*'
    });
}

[jackmcdade]

Ah, I figured out my issue. I was watching the /src/** files instead of the compiled files in /public/{whatever}, so the changes weren’t there until next save. Makes sense. Silly me.

[dmitryuk]

I have found final result should be like

mix.browserSync({
        files: [
            'public/css/*.css',
            'public/js/*.js'
        ]
    });