v2.23.0 - DX release
- Fixed: removed weinre from the UI - it was using deprecated packages, and is un-maintained. e6be4e9
- Fixed: Updated socket.io to the latest version (security advisory)
- Fixed: Allow
notify
command over HTTP protocol ac86665 (closes #1467) - New: CI: build on node 8 (latest lts) 3b7e8cb
- New: Easier CLI commands for common flows. (see below) 91b7e89
- New:
watch
option - (see below) - New: Supports CSS
@imports
- thanks to Live Reload fb26e82 (closes #10) - New: Fall back to a directory listing if a request gives a 404 b5cc56e
- New:
single
option - adds a middleware to help with SPAs (serves index.html for all non-matching routes) 91480aa - New:
ignore
option - shortcut for adding towatchOptions.ignored
- added because of the newwatch
option - Improved: Perf: Always group file-changes into flexible 500ms buffers - this will help things such as
git checkout
without any configuration fd3d074 - Improved: Perf: Adding adding cwd + ignore defaults to all watcher options dbb1267
- Changed: Log CSS file injections into the console (rather than the overlay, which always gets in the way) cb5b44c
Highlights
Easier CLI commands
In an attempt to streamline the common use-cases, Browsersync will now attempt to 'do the right thing' when no command is provided, for example:
To run a static server, serving from the current directory
# before
browser-sync start --server
# after
browser-sync .
To run a static server, serving from 2 directories:
# before
browser-sync start --server app/src app/tmp
# after
browser-sync app/src app/tmp
If the directory contains a 'index.html' file, you can omit any input and just run:
# after
browser-sync
You can run the proxy in this manner too
# after
browser-sync https://example.com
To run a proxy, whilst also serving static files
# after
browser-sync https://example.com htdocs/themes/example
New watch
option
Because we now have the shorthand ways of launching servers/proxies, eg: browser-sync .
- it also made sense to automatically watch files too. So, if watch: true
- then Browsersync will make a best-guess at which files to automatically watch.
Here's a comparison to the old way (which will still work, of course)
# before
browser-sync start --server ./app --files ./app
# after
browser-sync ./app -w
Behind the scenes, Browsersync is just looking at served directories (in this case, app
) and
adding it to the regular files
option as normal.
It means the following the 2 configurations are identical, but the latter is better since there's no
repetition.
{
"server": {"baseDir": ["app"]},
"files": ["app"]
}
{
"server": {"baseDir": ["app"]},
"watch": "true"
}
New ignore
option
Added as a convenience since we have simpler watching via the watch
flag. Use it to ignore any patterns that should not cause Browsersync reloads/injections
Example:
- Serve files from the 'app' directory
- Watch all files
- But, exclude **/*.js
(if using Webpack, etc)
CLI:
browser-sync app -w --ignore '**/*.js'
Config:
{
"server": "app",
"watch": true,
"ignore": "**/*.js"
}
New single
option, easy SPA development
This option will add the connect-history-api-fallback
middleware automatically for you, meaning that developing with client-side routers can be done without configuring this middleware manually
Example:
- Serve files from the app
directory
- Watch all files
- Serve index.html
for all none matching routes
browser-sync app -w --single
Fall back to a directory listing if a request gives a 404
No more Cannot Get /' messages
. If you run Browsersync in a directory where there's no index.html
, a directory listing will be shown instead.