bug/question(glob): Browsersync reloads browser tabs when I save files that isn’t matches by glob patterns

[Kristinita]

#1380 — possibly related 2017 issue.

1. Summary

If I use glob patterns in the value of the files option, Browsersync reloads browser tabs when I save files that isn’t matches by my glob patterns. For example, if I use the pattern **/*{html, js}, Browsersync not solely reloads browser tabs when I save .html and .js files, but also when I save files with any other extensions.

It looks like a bug. If this isn’t a bug, it would be nice to add to the documentation how to use glob patterns in Browsersync. After reading the documentation, in particular documentation of the options files and watchOptions, I didn’t understand what I should do.

2. MCVE

2.1. bs-config.js

module.exports = {
    files: [
        "**/*.html",
        "!**/*.yaml"
    ],
    logLevel: "debug",
    open: false,
    watch: true
};

2.2. Project structure

/bs-config.js
/KiraHTML.html
/KiraXML.xml
/KiraYAML.yaml

KiraHTML.html, KiraXML.xml and KiraYAML.yaml may contain any valid content or no content.

2.3. Steps

# [INFO] Step 1 — run Browsersync
D:\SashaDebugging\KiraBrowsersyncGlob>browser-sync --config bs-config.js .
[Browsersync] [debug] -> Starting Step: Finding an empty port
[Browsersync] [debug] Found a free port: 3000
[Browsersync] [debug] Setting Option: {cyan:port} - {magenta:3000
[Browsersync] [debug] +  Step Complete: Finding an empty port
[Browsersync] [debug] -> Starting Step: Getting an extra port for Proxy
[Browsersync] [debug] +  Step Complete: Getting an extra port for Proxy
[Browsersync] [debug] -> Starting Step: Checking online status
[Browsersync] [debug] Resolved www.google.com, setting online: true
[Browsersync] [debug] Setting Option: {cyan:online} - {magenta:true
[Browsersync] [debug] +  Step Complete: Checking online status
[Browsersync] [debug] -> Starting Step: Resolve user plugins from options
[Browsersync] [debug] +  Step Complete: Resolve user plugins from options
[Browsersync] [debug] -> Starting Step: Set Urls and other options that rely on port/online status
[Browsersync] [debug] Setting multiple Options
[Browsersync] [debug] +  Step Complete: Set Urls and other options that rely on port/online status
[Browsersync] [debug] -> Starting Step: Setting Internal Events
[Browsersync] [debug] +  Step Complete: Setting Internal Events
[Browsersync] [debug] -> Starting Step: Setting file watchers
[Browsersync] [debug] +  Step Complete: Setting file watchers
[Browsersync] [debug] -> Starting Step: Merging middlewares from core + plugins
[Browsersync] [debug] Setting Option: {cyan:middleware} - {magenta:List []
[Browsersync] [debug] +  Step Complete: Merging middlewares from core + plugins
[Browsersync] [debug] -> Starting Step: Starting the Server
[Browsersync] [debug] Static Server running ({magenta:http}) …
[Browsersync] [debug] Running mode: SERVER
[Browsersync] [debug] +  Step Complete: Starting the Server
[Browsersync] [debug] -> Starting Step: Starting the HTTPS Tunnel
[Browsersync] [debug] +  Step Complete: Starting the HTTPS Tunnel
[Browsersync] [debug] -> Starting Step: Starting the web-socket server
[Browsersync] [debug] Setting Option: {cyan:clientEvents} - {magenta:List [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]
[Browsersync] [debug] +  Step Complete: Starting the web-socket server
[Browsersync] [debug] -> Starting Step: Starting the UI
[Browsersync] [debug] Setting Option: {cyan:session} - {magenta:1706372406926
[Browsersync] [UI] Starting Step: Setting default plugins
[Browsersync] [UI] Step Complete: %s Setting default plugins
[Browsersync] [UI] Starting Step: Finding a free port
[Browsersync] [UI] Step Complete: %s Finding a free port
[Browsersync] [UI] Starting Step: Setting options also relevant to UI from BS
[Browsersync] [UI] Step Complete: %s Setting options also relevant to UI from BS
[Browsersync] [UI] Starting Step: Setting available URLS for UI
[Browsersync] [debug] Getting option via path: {magenta:[ 'urls' ]
[Browsersync] [UI] Step Complete: %s Setting available URLS for UI
[Browsersync] [UI] Starting Step: Starting the Control Panel Server
[Browsersync] [UI] Using port 3001
[Browsersync] [UI] Step Complete: %s Starting the Control Panel Server
[Browsersync] [UI] Starting Step: Add element events
[Browsersync] [UI] Step Complete: %s Add element events
[Browsersync] [UI] Starting Step: Registering default plugins
[Browsersync] [UI] Step Complete: %s Registering default plugins
[Browsersync] [UI] Starting Step: Add options setting event
[Browsersync] [UI] Step Complete: %s Add options setting event
[Browsersync] [debug] +  Step Complete: Starting the UI
[Browsersync] [debug] -> Starting Step: Merge UI settings
[Browsersync] [debug] Setting Option: {cyan:urls} - {magenta:Map { "local": "http://localhost:3000", "external": "http://192.168.122.99:3000", "ui": "http://localhost:3001", "ui-external": "http://192.168.122.99:3001" }
[Browsersync] [debug] +  Step Complete: Merge UI settings
[Browsersync] [debug] -> Starting Step: Init user plugins
[Browsersync] [debug] Setting Option: {cyan:userPlugins} - {magenta:
[Browsersync] [debug] +  Step Complete: Init user plugins
[Browsersync] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.122.99:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.122.99:3001
 ---------------------------------------
[Browsersync] Serving files from: D:\SashaDebugging\KiraBrowsersyncGlob
[Browsersync] Watching files…

# [INFO] Step 2 — open and save KiraHTML.html
[Browsersync] Reloading Browsers…

# [INFO] Step 3 — open and save KiraYAML.html
# Nothing happened

# [INFO] Step 4 — open and save KiraXML.xml

2.4. Behavior

2.4.1. Expected

# [INFO] Step 4 — open and save KiraXML.xml
# Nothing should happen

See the expected glob pattern matches for my MCVE case online on Globster:

I expected that Browsersync would solely trigger a browser tab reload event when saving a file KiraHTML.html, that matched my glob pattern.

2.4.2. Actual

# [INFO] Step 4 — open and save KiraXML.xml
+ [Browsersync] Reloading Browsers…

The browser tabs reload event is triggered, despite that glob pattern **/*.html doesn’t match .xml files.

3. Environment

1. Windows 11 [Version 10.0.22621.2861]
2. Node.js v21.6.1
3. npm 10.3.0
4. browser-sync 3.0.2

Thanks.

[Kristinita]

Status: RESOLVED :heavy_check_mark:

Solution

Don’t use watch: true if the option files already exists.

module.exports = {
    files: [
+       "**/*.html"
-       "**/*.html",
-       "!**/*.yaml"
    ],
    logLevel: "debug",
    open: false,
-   watch: true
};

Browsersync already watches files defined in the files option without the watch option. If user additionally adds watch: true, Browsersync reload tabs in browser, when Browsersync user saves any project file. watch “should be used as an alternative to the files option”.

Thanks.