-
Notifications
You must be signed in to change notification settings - Fork 755
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)
// Leave this set as null & browser-sync will try to figure out the correct IP to use. (about 90% accurate)
host: null
// 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
###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