yarn browser-sync 2.23.0
v2.23.0 - DX release

latest releases: 3.0.2, 3.0.1, 3.0.0...
6 years ago
  • 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 to watchOptions.ignored - added because of the new watch 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.

Don't miss a new browser-sync release

NewReleases is sending notifications on new releases.