Browsersync and Gulp not working

Workflow
,
1

I’ve had several versions of this problem now so bear with me…

First, localhost:3000 would just hang when I proxy the domain I set up in Local. Here’s my browser-sync task:

gulp.task('bs', function() {
  browserSync.init({
    proxy: 'dev.site.ca',
  });
});

I enabled IPv6 Loopback to no effect. I tried site.test, site.local, site.dev, dev.site.ca, all to no effect. Local has added this to my Hosts file:

192.168.95.100 dev.site.ca #Local Site

So i tried using 192.168.95.100 as the proxy address and it worked! I was able to connect to browser-sync at localhost:3000 for exactly 1 page load. Now, when I load localhost:3000, it redirects to the Local domain without browser-sync. I tried all the different domains again and tried it with IPv6 Loopback on and off.

I’ve sunk way too much time into this already. Any ideas?

2

For this particular setup, you’ll want to change the WordPress Site URL and Home URL’s in Settings » General to localhost:3000

For more on Browsersync and Local, please see Gulp + Browsersync or Livereload - Workflow - Local Community

3

I have it working on my sites, but for some reason it is very slow on page refreshes. I believe it has to do with an inability to add ipv6 loopback in local. Works on my other machine but my new macbook it is not. Back to your question. Try this.

  browserSync.init({
notify: false,
open: 'local',
proxy: {
  target: 'Domain for site on local',
  ws: true
},
ghostMode: true,
https: false,
watchOptions: {
  debounceDelay: 1000 // This introduces a small delay when watching for file change events to avoid triggering too many reloads
}
// uncomment below is you want specific browsers to be launched when you run the script.
//browser: ['google chrome', 'firefox developer edition'] .

});