File event change but doesn't reload in browser- random

I have an issue with BrowserSync set up via Gulp in both Laravel Valet and VVV Vagrant workflows using WordPress. (Valet and VVV are not run at the same time - I just have noticed the issue in both)

I find that that new sites created work fine with BrowserSync and all watched files when changed update and the browser reloads - however randomly after a while the browser reload stops even though the file event change is recognised in the output. Other Gulp tasks carry on working normally just the BrowserSync stops.

I have macOS Sierra 10.12.6 Gulp 3.9.1 Node 8.11.3 BrowserSync 2.24.6

Once the issues occurs it fails in all browsers and on restart - it also fails if executed as a command in a terminal session - ie

browser-sync start --proxy "mysite.test" --files "*.css"

My gulp file task…

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserSync = require('browser-sync').create();
var sitename = 'mysite'; 

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

});

My Task output

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

[18:26:01] Using gulpfile ~/Sites/mysite/wp-content/themes/mytheme/gulpfile.js
[18:26:01] Starting 'sync'...
[18:26:01] Finished 'sync' after 69 ms
[Browsersync] Proxying: http://mysite.test
[Browsersync] Access URLs:
 --------------------------------------------
       Local: http://127.0.0.1.xip.io:3000
    External: http://192.168.0.22.xip.io:3000
 --------------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.22.xip.io:3001
 --------------------------------------------
[Browsersync] Watching files...
[Browsersync] File event [change] : style.css
[Browsersync] File event [change] : style.css
[Browsersync] File event [change] : style.css
[Browsersync] File event [change] : style.css

Any thoughts?

[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

[neilgee]

Yes @uaibo solution also worked for me