Skip to content
Shane Osbourne edited this page Mar 26, 2014 · 5 revisions

Whilst the preferred way to use BrowserSync is via a config-file, there may be times when you'd just like to use it directly from the command-line with no config required.

Once you have installed BrowserSync globally, you can move into any directory and use the following commands:

##Available Options:

    --files        File paths to watch
    --server       Run a Local server (uses your cwd as the web root)
    --directory    Show a directory listing for the server
    --proxy        Proxy an existing server
    --config       Specify a path to a bs-config.js file
    --host         Specify a hostname to use

##--files

Specify files and/or patterns to watch.

# Single file
browser-sync start --files "css/core.css"

# Single Pattern
browser-sync start --files "css/*.css"

# Multiple files
browser-sync start --files "css/core.css, css/ie.css"

# Multiple patterns
browser-sync start --files "css/*.css, *.html"

##--server

# Server using current directory as the root
browser-sync start --server

# Server using the 'app' directory as the root
browser-sync start --server "app"

# Server using current directory as the root with directory listing
browser-sync start --server --directory

##--directory (use with --server)

# Server using current directory as the root with directory listing
browser-sync start --server --directory

##--proxy

# Using a local.dev vhost
browser-sync start --proxy "local.dev"

# Using a local.dev vhost with PORT
browser-sync start --proxy "local.dev:8001"

# Using a localhost address
browser-sync start --proxy "localhost:8080"

# Using a localhost address in a sub-dir
browser-sync start --proxy "localhost:8080/site1"

##--config

Provide a path to the bs-config.js file (created with browser-sync init)

browser-sync start --config app/conf/bs-config.js

##--host

Override the hostname detection

browser-sync start --server --host "127.0.0.1"

#Examples

###Watching files

# Watch ALL CSS files in a directory for changes
browser-sync start --files "app/css/*.css"
# Watch ALL CSS files & HTML files in a directory for changes
browser-sync start --files "app/css/*.css, app/*.html"

###Watching files + your existing Server (proxy)

# Using a local.dev vhost
browser-sync start --proxy "local.dev" --files "app/css/*.css"
# Using a local.dev vhost with PORT
browser-sync start --proxy "local.dev:8001" --files "app/css/*.css"
# Using a an IP based host
browser-sync start --proxy "192.167.3.2:8001" --files "app/css/*.css"

###Watching files + built-in static server (for html, js & css)

# Watch ALL CSS files for changes with a static server
browser-sync start --files "app/css/*.css" --server
# Watch ALL CSS files for changes with a static server & specify that the base dir should be "app"
browser-sync start --files "app/css/*.css" --server "app"
# Watch ALL CSS files for changes with a static server & specify that the base dir should be "app" & show a directory listing
browser-sync start --files "app/css/*.css" --server "app" --directory

Watch ALL CSS files for changes with a static server & specify that the base dir should be "app" & specify the index file (note the missing l)

browser-sync start --files "app/css/*.css" --server "app" --index "index.htm"
# Watch ALL CSS files for changes with a static server & specify that the base dir should be "app" & with ghostMode disabled
browser-sync start --files "app/css/*.css" --server "app" --ghostMode false
Clone this wiki locally