Browser-sync: Browser not reloading on file event change

[neilgee]

Issue details

_Please provide issue details here_.
Browser not reloading on file event change, sometimes it will but in another session it does not reload

Steps to reproduce/test case

Running Browsersync v2.23.6 with Gulp & VVV local development, browser is not reloading after file has changed, the issue is intermittent, singular body tag exists.

Issue is odd as sometimes the reload works - then it will simply stop and I am not able to get it going even with a gulp task restart, browsersync sync and browser restart.

_Please provide necessary steps for reproduction of this issue, or better the
reduced test case (without any external dependencies)_.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.23.6 ]
• Node [ 8.9.0 ]
• Npm [ 5.5.1 ]

Affected platforms

• [ ] linux
• [ ] windows
• [x ] OS X
• [ ] freebsd
• [ ] solaris
• [ ] other _(please specify which)_

Browsersync use-case

• [ ] API
• [x] Gulp
• [ ] Grunt
• [ ] CLI

If CLI, please paste the entire command below

{cli command here}

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

{Browsersync init code here}

> Executing task: node_modules/.bin/gulp sync <

[10:24:44] Using gulpfile ~/remote-dev/www/mysite/htdocs/wp-content/themes/mysitetheme/gulpfile.js
[10:24:44] Starting 'sync'...
[10:24:44] Finished 'sync' after 14 ms
[Browsersync] Proxying: mysite.test
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.11:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.11:3001
 -------------------------------------
[Browsersync] Watching files...
[Browsersync] File event [change] : style.css

Gulp task

// Fire up browserSync
gulp.task('sync', function() {
    browserSync.init({
        proxy: "mysite.test",
    files: ["./*.css","*.php","css/*css","lib/*.php", "includes/*.php", "includes-child/*.php", "includes-child/woocommerce/*.php", "includes-child/woocommerce/*.css"],
    xip: false

    });

});

Have tried...
Rrestarting all the things,
Check for duplicate instances of body tag
Changed proxy value to localhost:3000
Resync'ing browsers from UI
xip values both true and false

[aznnomness]

I was having issues with webpack dev/hot middleware and browsersync. I found I needed to make sure to have browsersync watch the source files not the destination (where webpack compiles then bundles them to). Here is what my current config looks like (the reloadDelay and reloadDebounce may help):

const server = browserSync.create();
const compiler = webpack(configuration);

server.init({
    server: {
        baseDir: './dist',
        middleware: [
            webpackDevMiddleware(compiler, {
                path: configuration.output.publicPath,
                noInfo: false,
                quiet: false,
                lazy: false,
                stats: {
                    colors: true,
                },
            }),
            webpackHotMiddleware(compiler)
        ]
    },
    reloadDelay: 1000,
    reloadDebounce: 1000,
    files: [
        './src/*.css',
        './src/*.js',
        './src/*.html'
    ]
});

Not sure if this will help, I haven't worked with bs and gulp but I thought I'd throw my experience out there.

[neilgee]

Thanks @aznnomness will give that a try next time it happens, odd thing is that the issue is intermittent - will post back.

[aznnomness]

@neilgee did my configuration help at all?

It seems since updating to version 2.24.4 that reloading the browser on CSS changes only has broken with my above config.

[neilgee]

@aznnomness I have not had to implement it yet - I am doing most work now in a Laravel Valet local dev envrionment and BS is working consistently - previously I was using Vagrant VVV when BS wouldn't always work.

[neilgee]

I did try https://github.com/BrowserSync/browser-sync/issues/1536#issuecomment-383719320 but still have same issue - so this also has started happening in Valet - can't find a particular pattern - all new sites work ok - then an odd site will not reload.

The issue is now here https://github.com/BrowserSync/browser-sync/issues/1589

[uaibo]

Here's the solution that worked for me:

browserSync.init({
  injectChanges: false
});

injectChanges is true by default: https://www.browsersync.io/docs/options#option-injectChanges

[michaelwautier]

Here's the solution that worked for me:

browserSync.init({
  injectChanges: false
});

injectChanges is true by default: https://www.browsersync.io/docs/options#option-injectChanges

@uaibo This worked for me, thanks !