Gulpfile with browsersync

sage
1

The latest commit to use browsersync is great…but: When I save out a .scss file, the styles are injected, but then the page hard reloads. The same thing was happening with livereload as well.

Is anyone else having this issue?

Just as reference in case something else wrong with my workflow:

  • Im using Bourbon and Neat pulled in by Bower (no overrides)
  • I have @import directives pointing to the bower_components directory for the main Bourbon and Neat files in main.scss (@import “…/…/bower_components/bourbon/app/assets/stylesheets/_bourbon”:wink:

Other than that, everything else is standard.

2

Looks like there is an issue, you are not the only one to report this: https://github.com/roots/roots/issues/1287#issuecomment-72085636

I am looking at it right now.

3

Looking at the Browsersync docs on sass, it seems as though pipe(reload({stream:true})) needs to be ran last. I can’t say I entirely follow everything going on in the gulpfile yet, but it looks like var writeToManifest fires it earlier.

Not sure if that helps, but something I saw. Just moving it to last did not work though…

Additionally, Sass source maps are not working here either.

4

Try this and let me know if it fixes it for you: https://github.com/roots/roots/pull/1296

5

This is working great now!

6

Thanks! @austin!

This resovles: https://github.com/roots/roots/issues/1287#issuecomment-72085636

7

Additionally, would it be possible to eliminate WP Admin pages from being refreshed? This could help keep content from being accidentally lost in open tabs, and prevent having to close the ‘Are you sure you want to reload’ modal on pages with unsaved content.

It seems as though regex patterns are possible, but I’m not sure how it would interact with WP or if it would even be possible:
http://www.browsersync.io/docs/options/#option-snippetOptions

Not sure if you can target everything in a /wp (or /wp-admin/*.php for non-bedrock) directory or not.

8

If you open the admin pages with the normal URL, they won’t refresh. gulp watch fires the main URL in http://localhost:3000 so if you don’t log and use the admin pages, you should be fine.

9

Yeah I mean you should really only using the admin from your non-proxy URL. It might be confusing for new users though.

Options:

  1. do not watch any PHP files.
  2. ignore admin from browsersync
  3. when you click on “edit post” in the admin bar from the proxy page, it links to your original example.dev and not the proxied url.

I might have to sling some code for https://github.com/shakyShane/browser-sync and or https://github.com/shakyShane/foxy to make #2 or #3 happen.

10

If anyone wants to help me clarify: https://github.com/shakyShane/browser-sync/issues/415

1 Like