Browsersync

Edit on Github
webdev/browser-sync.md
Jul 16, 2017
Web Development

tl;dr

# 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

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

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

is the same as running the following command:

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

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

browser-sync init