search

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.17k stars 754 forks source link

Browsersync broken after updating to 2.18.5 #1281

Open k1sul1 opened 7 years ago

k1sul1 commented 7 years ago

Issue details

I'm using the same project template for every project I do, and yesterday I noticed strange behaviour in my latest project. Whenever I updated a .styl file, and the usual build processes ran, the styles were not injected to the page, but the page was instead refreshed, multiple times (2-3).

Just now I got the idea to compare versions between my projects where Browsersync is working properly, and noticed a difference. In my previous projects I've 2.17.5, and on this project I had 2.18.5.

After downgrading to 2.17.5 with npm install browser-sync@2.17.5 the issue is gone, and styles are injecting correctly.

Steps to reproduce/test case

I think that this is related to symlinks somehow. Here's the output from Browsersync 2.18.5: 

[BS] File changed: htdocs/wp-content/themes/themename/dist/css/bundle.css
[BS] File changed: htdocs/wordpress/wp-content/themes/themename/dist/css/bundle.css
[BS] File changed: htdocs/wordpress/wp-content/themes/themename/dist/css/bundle.css.map

On 2.17.5 I only get this:

[BS] File changed: htdocs/wp-content/themes/pieniele/dist/css/bundle.css

I'm using https://github.com/Seravo/wordpress as my project template, which symlinks htdocs/wp-content to htdocs/wordpress/wp-content/. My command is rather "naive", because I want to watch for every single change in my project, so it matches in htdocs/wordpress/wp-content too. Guess it didn't match symlinks in previous versions?

Here's my reduced package.json, which is located at the project root:

{
"scripts": {
  "themedir": "echo 'htdocs/wp-content/themes/themename'",
  "devdomain": "echo 'https://wordpress.local'",
  "serve": "browser-sync start  --proxy $(npm run devdomain -s) --files '**/dist/js/*.js, **/*.css, **/*.php' --no-open --no-notify --no-ghost-mode"
},
"devDependencies": {
  "browser-sync": "^2.12.8"
}

So running npm run serve will start a new Browsersync instance in the project root, and watches for every PHP & CSS file, and newly updated JS files located in any dist folder.

Please specify which version of Browsersync, node and npm you're running

Affected platforms

Browsersync use-case

If CLI, please paste the entire command below

npm run serve

shakyShane commented 7 years ago

Possibly caused by an updated version of the file-watching module we use. I can't off the top of my head whether symlinks should/shouldn't work - I will have to try it myself and report back!

k1sul1 commented 7 years ago

I was able to replicate the issue in a new project, issue still persists with 2.18.6.

Whenever I edit a style file, the styles are injected, and then the browser is refreshed. This also happens the other way around sometimes, first refresh and then style injection.

2.17.5 still works great.