Working with a Config File

To create a config file, move into your project directory (the root folder of your website) and run:

browser-sync init

This will create a bs-config.js file that has some default settings, as well as some comments/guidelines. We'll look at all the options in detail shortly, but just so you know, you can now simply run:

browser-sync

##Options

###files - (default: null)

// single file
files: "app/css/style.css"

// multiple files
files: ["app/css/style.css", "app/css/ie.css"]

// multiple files with glob
files: "app/css/*.css"

// multiple globs
files: ["app/css/*.css", "app/**.*.html"]

###debugInfo - (default: true)

// Don't fill my terminal with info
debugInfo: false

// Give me as much info as possible
debugInfo: true

###host - (default: null - auto detected) Browser-sync will choose an external IP to use for serving the files it needs. This will allow it to work on any device connected to your wifi network & is about 90% accurate. If it chooses the wrong one for you & you know which one it should use - plug it in here. (otherwise leave this set to null for auto-detect)

// Override host detection if you know the correct IP to use
host: "192.168.1.1"

###ghostMode - (default: { links: true, forms: true, scroll: true} )

// Here you can disable/enable each feature individually
ghostMode: {
    links: true,
    forms: true,
    scroll: false
}

// Or switch them all off in one go
ghostMode: false

###proxy - (default: null) NOTE: "localhost" not supported here, try to use something else like "0.0.0.0" instead if you need to.

// use your existing vhost setup
proxy: {
	host: "local.dev"
}

// use your existing vhost setup with a specific port
proxy: {
	host: "local.dev",
	port: 8001
}

// use an IP-based host (like the built-in php server for example)
proxy: {
	host: "192.168.0.4",
	port: 8001
}

###server - (default: null) Server should only be used for static HTML, CSS & JS files. It should NOT be used if you have an existing PHP, Wordpress, Rails setup. That's what the proxy above is for.

// Serve files from the app directory
server: {
    baseDir: "app"
}

// Serve files from the app directory, with a specific index filename
server: {
    baseDir: "app",
    index: "index.htm"
}

// Serve files from the root directory
server: {
    baseDir: "./"
}

###ports - (default: null) Browser-sync will detect up to 3 available ports to use within a fixed range. You can override this if you need to.

// only use ports within a certain range
ports: {
    min: 3000,
    max: 3100
}

// you can also specify just a minimum
ports: {
    min: 3000
}

###open - (default: true) - when used with server

// Launch a browser window at the correct location
open: true

// Stop the browser from automatically opening
open: false

###timestamps - (default: true) Browser-sync appends a timestamp to injected files to ensure the browser reloads the latest version, some workflows (like this one: http://www.youtube.com/watch?v=4r6yhimSmZg) may work better without it though.

// Don't append timestamps to injected files
timestamps: false

###fileTimeout - (default: 1000) If you're using a pre-processor (like SASS) & you find that the file watching is erratic, you can increase the amount of time to wait after a file changed here. (only change this if you experience a problem, it will probably work just fine)

fileTimeout: 4000 // wait 4 seconds while SASS compiles

###scrollThrottle - (default: 0) If you experience any problems with the scroll sync, you can throttle how quickly the events are sent. (0-200 works best)

scrollThrottle: 100 // only send scroll events every 100 milliseconds

###notify - (default: true) Browser-sync will flash a quick message in all connected browsers to confirm that CSS injection has taken place (useful when you're not sure whether the injection worked, or whether your CSS didn't make a difference)

// Tell me when a CSS file was injected
notify: true

// Don't show any notifications in the browser.
notify: false