Menu icon Foundation
BrowserSync stops working after two reloads

I'm using the SASS version of Foundation for Emails v2.1.0. I followed all the "Installing" directions and "Running the Server" and everything appears to be working fine until I get past two browser reloads. After the second reload then BrowserSync stops reloading altogether. I can get it going again by stopping and restarting the server though it only works for two reloads.

I've tried creating a whole new project, but still getting the same issue. I was not having this issue prior to 2.1.0. Any thoughts on what this could be?

browsersyncnpmnodegulp

I'm using the SASS version of Foundation for Emails v2.1.0. I followed all the "Installing" directions and "Running the Server" and everything appears to be working fine until I get past two browser reloads. After the second reload then BrowserSync stops reloading altogether. I can get it going again by stopping and restarting the server though it only works for two reloads.

I've tried creating a whole new project, but still getting the same issue. I was not having this issue prior to 2.1.0. Any thoughts on what this could be?

Corey Schaaf over 3 years ago

Roger,

I've been running into this issue as well, but it happens less frequently. 

A few questions:

1. Did you recently update foundation for emails from version 2.0 to 2.1? If so, is that when the problem started? 

2. Do you have any additional plugins on your browser like a pop up blocker or other themes installed that deal with browser reloads.  I had a 3rd party tool installed that I disabled / uninstalled and the problem happens way less frequently than it did previously. I'm not suggesting that is a fix, just something I noticed after I uninstalled a pop-up blocker. 

3. Also, if you have multiple tabs open with the same project URL, I noticed the browser sometimes stops syncing.

Roger Tinch over 3 years ago

It was working fine with 2.0, the problem started after moving to 2.1. I attempted to do an update to 2.1, but when that didn't work I just did a whole new install and copied over images and styles to the new 2.1 project. 

Rafi Benkual over 3 years ago

Good stuff Corey! It helps to know what caused your issue.

I haven't see this. I would also ask how many pages or templates you have and SCSS partials. Looking at the gulpfile, not seeing any changes were made to Browsersync. 

Corey Schaaf over 3 years ago

Rafi, since I'm running into this issue (with less frequency) I thought I would include a screnshot of everything in my src directory. Note I'm not using the image compression tools. 

Directory of SCSS Partial, Templates ..

Rafi Benkual over 3 years ago

Are you running the production flag? `npm run build`? Just trying to narrow down the senario

Corey Schaaf over 3 years ago

Rafi, I'm using

foundation build

I've just gotten in the habit of using foundation build instead of

foundation watch

Maybe that's part of the problem? I've also noticed if I do two rapid fire saves before a build is completed it will cause the sync issue. 

Rafi Benkual over 3 years ago

I'm on a conversation on GitHub about this https://github.com/zurb/foundation-emails/issues/397 that has a potential solution.

Are you able to test it and let us know if that does it for you? That way we can get the update in sooner.

Corey Schaaf over 3 years ago

Just got out of a meeting ... I'll check it now. 

Corey Schaaf over 3 years ago

Rafi, I've done everything I can to mimic my process for causing browser syn to stop and it seems to be working just fine. It was happening less frequently for me, but I've tried rapidly saving a file before it compiles and browser sync is still working fine for me.  

I modified the following based on the test from the link above:

gulpfile.babel.js

gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, inline, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('change', gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('change', gulp.series(sass, pages, inline, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));

 

Roger Tinch over 3 years ago

That fix worked for me! Thanks everyone.

Olivier over 3 years ago

I was having the same issue on Mac using Chrome and Sublime Text 3. I made the change outlined above to the babel.js file and it seemed to fix the problem.

Rafi Benkual over 3 years ago

Sweet! Thanks for confirming the fix works - it hepls us merge PR's faster. We just merged this Sankalp in! https://github.com/zurb/foundation-emails-template/pull/18

Be sure to give him props on GitHub!

Shakogun over 3 years ago

Fixed it for me too, thank you!

Simon Olsen over 2 years ago

Confirming @Corey's update at http://foundation.zurb.com/forum/posts/39825#comment_32392 worked for me too. BrowserSync was really unresponsive - sometimes reloading, sometimes doing parts and not other parts, or doing nothing.

Thanks Corey!

Jim Hogarth over 2 years ago

Does this fix work with the most current version?

I removed the older version Foundation from my laptop and installed the latest. I'm having this problem, after one update the browser window is left blank. I have to stop and restart 'foundation watch' to get it to display again. This happens with both FF and Chrome.

There doesn't appear to be a gulpfile.babel.js as identified in the GitHub link.

Thanks!

Jim