2

Content

I develop websites with the Roots stack which utilizes Gulp + BrowserSync.

When I execute gulp watch, initially, it opens up my browser to https://localhost:300X and I see the site I'm working on - as expected.


The Goal

When I save CSS (SASS), HTML, JS or PHP, Gulp compiles and BrowserSync is suppose to refresh the page.


The Problem

Over time (couple of months), it now almost never refreshes after saving a PHP file. It rarely does it for HTML. And as of this week it's only doing it sometimes for CSS / SASS. However, still refreshes the JS consistently.

Sometimes refreshing the page manually doesn't even work.

I don't know why, and I don't know how to resolve it.


My Theory

It seems that BrowserSync is caching or something.


Further Context

To clarify:

  • There are no errors output in Gulp and it appears to execute correctly.
  • If I have a SASS file open and save 10 times in a row. Sometimes it will be most of those times. Other times it will only be a few times.
  • I do give it a few seconds between saves because I have seen it choke if I save to rapidly.
  • This is working with existing files. I have not tested with creating new files.


My Gulp.js File

https://gist.github.com/s3w47m88/5b1511ef4f2bb3c458924642da818e9a

Spencer Hill
  • 1,043
  • 2
  • 15
  • 38
  • 1
    post your gulp config section with relevant sections (show browsersync setup. show filewatch setup) ...also keep in mind that file watches dont naturally discover new files. If you have a basic setup, you have to stop and restart your local server to sync the browser with the new files. – K. Alan Bates May 20 '18 at 19:06
  • I have posted my gulp.js file, but I'm not sure what you mean by "browsersync setup" and "filewatch setup". – Spencer Hill May 20 '18 at 19:14
  • 1
    by "browsersync setup" i meant your bs server init. by "filewatch setup" I meant where you had your file glob patterns and gulp.watch settings" ...I'm reviewing your code to see if I can see anything for you to try – K. Alan Bates May 20 '18 at 19:21
  • Simple first: create a new task that does nothing but execute browserSync.reload. Add that task as the last task to run in your gulp.watches. I do manual browserSync.reload calls for all of my files and don't experience any problems you describe. – K. Alan Bates May 20 '18 at 19:25
  • Okay, I located the BrowserSync init and respective glob (https://stackoverflow.com/questions/30229465/what-is-file-globbing) patterns in the gulp.js at line 256. And I added this line, a 'task', at the end of the gulp.task container: gulp.watch(browserSync.reload); - But now I'm not sure what the next step is or what to expect as the result. – Spencer Hill May 20 '18 at 19:39
  • `gulp.watch("app/*.php").on("change", ()=>{phpTasksYouDefined; browser.reload;});` That's the basic pattern I follow for getting gulp to process changes and have browser sync reload after finished. – K. Alan Bates May 21 '18 at 01:11
  • You are using gulp.start which I don't trust given its non-documented status. Try gulp.task('default', function(callback) { runSequence('clean', 'build', callback) }); – Mark May 21 '18 at 02:45

0 Answers0