Notes

Browsersync

Automatically refresh your browser on multiple devices and see changes live

Edit on GitHub


Web Development

tl;dr

1# INSTALL
2npm install -g browser-sync #install with npm
3# or
4yarn global add broswer-sync #install with Yarn
5
6# RUN
7browser-sync start --server --files ./*.* #run by providing options at command line
8# or
9browser-sync start --config 'config/browsersync.js'
  • --server or -s runs a local server, gives you an IP on which you can check your site
  • --files or -f let’s you specify file paths to watch for file changes. ./*.* looks for changes to all files in the current folder. SImilarly, --files "css/*.css" will look for changes to all .css files in the css folder

Config file

If you don’t want to enter long command every time, you can save the same config to a .js file and mention it when running the command

1browser-sync start --config 'config/browsersync.js'

1module.exports = {
2  files: [ './*.*', './*/*.{html,htm,css,js}' ],
3  server: true
4}

is the same as running the following command:

1browser-sync --server --files './**/*.{html,htm,css,js}'

You can also generate a config file contaiing all the default options with the following command:

1browser-sync init
Browse all topics