Browsersync

July 15, 2018

tl;dr

code

# INSTALL
npm install -g browser-sync #install with npm
# or
yarn global add broswer-sync #install with Yarn

# RUN
browser-sync start --server --files ./*.* #run by providing options at command line
# or
browser-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

code

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

code

module.exports = {
  files: ["./*.*", "./*/*.{html,htm,css,js}"],
  server: true,
};

is the same as running the following command:

code

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

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

code

browser-sync init

Browsersync

tl;dr

Config file

Links