Browsersync Setup

[bixgomez]

Hello Greg (and others)...

I am setting my new custom theme up to use Browsersync. I got it working alright, but using the snippet provided -- --files \"theme\" -- it's only looking in the theme directory for changes. How can this be set up so that it also watches the custom directory?

Hmm, ok... I have changed the flag to read --files \"theme,custom\"

So now, when I run npm run watch, it works perfectly well, but when I run npm run watch:browser-sync, it still only syncs when something in the theme directory changes.

I am so confused, can you help me understand what is happening? Why does npm run watch initiate BrowserSync?

Thanks!

[bixgomez]

In case it's helpful, here are all my watch-related scripts:

"watch:tailwind:editor": "npm run development:tailwind:editor -- --watch",
"watch:esbuild": "npm run development:esbuild -- --watch",
"watch:browser-sync": "browser-sync start --proxy \"awakening-prison-art.lndo.site\" --files \"theme,custom\" --no-notify --no-inject-changes",
"watch": "run-p watch:**",```

[gregsullivan]

Hello, and thanks for posting your question!

Because WordPress only loads files from the theme folder, it should only be necessary to watch that folder; when you make a change to a file that causes the theme's CSS or JavaScript files to be rebuilt, they'll be rebuilt inside the theme folder, which should trigger a refresh by Browsersync.

This also prevents race conditions, since were Browsersync to fire a refresh on changes to the files being watched by Tailwind and esbuild, Browsersync might refresh before the files have actually been rebuilt.

That said: Are you finding that a change outside of the theme folder that successfully triggers a rebuild by Tailwind or esbuild doesn't trigger a refresh by Browsersync?

[bixgomez]

Ok... I set the argument back to --files \"theme\"

Now, all I need to do is run npm run watch, and it starts up BrowserSync, and all is well -- I can edit files in both theme and custom, and my browser refreshes like a champ.

But when I run npm run watch:browser-sync, it seems to ignore any changes I make in custom

[bixgomez]

It would seem to me that, after adding that browsersync-specific line, npm run watch would still behave like it did before -- watch for changes and compile, but not load BrowserSync, which it now does.

This is fine with me -- I just don't understand why!

[gregsullivan]

npm run watch:browser-sync isn't meant to be run alone, as it will only work properly if the other build processes are running as well. Without running npm run watch, changes to files in the custom directory won't be reflected in a browser with or without Browsersync, even following a manual refresh. It's the watch processes that update the CSS and JavaScript files in the theme folder, and this is the only folder that is used by WordPress in the browser.

If you want to have the option of running npm run watch without having Browsersync run as well, you'd need two commands: One for Browsersync itself, and one that combines the existing watch command with your Browsersync command. I haven't tested this, but something like:

"watch:tailwind:editor": "npm run development:tailwind:editor -- --watch",
"watch:esbuild": "npm run development:esbuild -- --watch",
"browser-sync": "browser-sync start --proxy \"awakening-prison-art.lndo.site\" --files \"theme,custom\" --no-notify --no-inject-changes",
"watch": "run-p watch:**",
"watch-bs": "run-p watch:** browser-sync",

The key point is that the browser-sync script isn't executed by npm run watch because it's no longer prefixed by watch:. The watch-bs command will run everything with the watch: prefix in parallel with the browser-sync script.

[bixgomez]

Oh! Thanks! That works perfectly now!

[gregsullivan]

Awesome, happy to hear it!