@types/browser-sync

property active

active: boolean;

• A simple true/false flag that you can use to determine if there's a currently-running Browsersync instance.

property emitter

emitter: NodeJS.EventEmitter;

• The internal Event Emitter used by the running Browsersync instance (if there is one). You can use this to emit your own events, such as changed files, logging etc.

property name

name: string;

• the name of this instance of browser-sync

property paused

paused: boolean;

• A simple true/false flag to determine if the current instance is paused

method cleanup

cleanup: (
    fn?: (error: NodeJS.ErrnoException, bs: BrowserSyncInstance) => void
) => void;

• Instance Cleanup.

method exit

exit: () => void;

• This method will close any running server, stop file watching & exit the current process.

method getOption

getOption: (name: string) => any;

• Callback helper to examine what options have been set.

  Parameter name

  The key to search options map for.

method init

init: (
    config?: Options,
    callback?: (err: Error, bs: BrowserSyncInstance) => any
) => BrowserSyncInstance;

• Start the Browsersync service. This will launch a server, proxy or start the snippet mode depending on your use-case.

method notify

notify: (message: string, timeout?: number) => void;

• Helper method for browser notifications

  Parameter message

  Can be a simple message such as 'Connected' or HTML

  Parameter timeout

  How long the message will remain in the browser. 1.3.0

method pause

pause: () => void;

• Method to pause file change events

method reload

reload: {
    (): void;
    (file: string): void;
    (files: string[]): void;
    (options: { stream: boolean }): NodeJS.ReadWriteStream;
};

• Reload the browser The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

• Reload a single file The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

• Reload multiple files The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

• The reload method will inform all browsers about changed files and will either cause the browser to refresh, or inject the files where possible.

method resume

resume: () => void;

• Method to resume paused watchers

method stream

stream: (opts?: StreamOptions) => NodeJS.ReadWriteStream;

• The stream method returns a transform stream and can act once or on many files.

  Parameter opts

  Configuration for the stream method

method use

use: (
    module: {
        'plugin:name'?: string | undefined;
        plugin: (opts: object, bs: BrowserSyncInstance) => any;
    },
    options?: object,
    cb?: any
) => void;

• Register a plugin. Must implement at least a 'plugin' property that returns callable function.

  use

  Parameter module

  The object to be required.

  Parameter options

  The

  Parameter cb

  A callback function that will return any errors.

method watch

watch: (
    patterns: string,
    opts?: chokidar.WatchOptions,
    fn?: (event: string, file: fs.Stats) => any
) => NodeJS.EventEmitter;

• Stand alone file-watcher. Use this along with Browsersync to create your own, minimal build system

property instances

instances: BrowserSyncInstance[];

method create

create: (name?: string, emitter?: NodeJS.EventEmitter) => BrowserSyncInstance;

• Create a Browsersync instance

  Parameter name

  an identifier that can used for retrieval later

method get

get: (name: string) => BrowserSyncInstance;

• Get a single instance by name. This is useful if you have your build scripts in separate files

  Parameter name

  the identifier used for retrieval

method has

has: (name: string) => boolean;

• Check if an instance has been created.

  Parameter name

  the name of the instance

method reset

reset: () => void;

• Reset the state of the module. (should only be needed for test environments)

call signature

(
    config?: Options,
    callback?: (err: Error, bs: BrowserSyncInstance) => any
): BrowserSyncInstance;

• Start the Browsersync service. This will launch a server, proxy or start the snippet mode depending on your use-case.

property ready

ready: (err: Error, bs: BrowserSyncInstance) => void;

property fn

fn: (event: string, file: string) => any;

property match

match?: string | string[] | undefined;

property options

options?: chokidar.WatchOptions | undefined;

property inputs

inputs: boolean;

property submit

submit: boolean;

property toggles

toggles: boolean;

property clicks

clicks?: boolean | undefined;

property forms

forms?: FormsOptions | boolean | undefined;

property scroll

scroll?: boolean | undefined;

index signature

[path: string]: T;

property cert

cert?: string | undefined;

property key

key?: string | undefined;

call signature

(req: http.IncomingMessage, res: http.ServerResponse, next: () => void): any;

property browser

browser?: string | string[] | undefined;

• The browser(s) to open "default"

property callbacks

callbacks?: CallbacksOptions;

• Register callbacks via a regular option - this can be used to get access the Browsersync instance in situations where you cannot provide a callback via the normal API (for example, in a Gruntfile)

  **Note**: Only the ready callback is currently supported here.

property clientEvents

clientEvents?: string[] | undefined;

• When ghostMode is setup the events listed here will be emitted and able to hook into. [ "scroll", "scroll:element", "input:text", "input:toggles", "form:submit", "form:reset", "click" ]

property codeSync

codeSync?: boolean | undefined;

• Send file-change events to the browser true

property cors

cors?: boolean | undefined;

• Add HTTP access control (CORS) headers to assets served by Browsersync. false 2.16.0

property cwd

cwd?: string;

• Current working directory 2.23.0

property excludeFileTypes

excludeFileTypes?: string[] | undefined;

• [ "js", "css", "pdf", "map", "svg", "ico", "woff", "json", "eot", "ttf", "png", "jpg", "jpeg", "webp", "gif", "mp4", "mp3", "3gp", "ogg", "ogv", "webm", "m4a", "flv", "wmv", "avi", "swf", "scss" ]

property files

files?: string | Array<string | FileCallback | object> | undefined;

• Browsersync can watch your files as you work. Changes you make will either be injected into the page (CSS & images) or will cause all browsers to do a full-page refresh. false

property ghostMode

ghostMode?: GhostOptions | boolean | undefined;

• Clicks, Scrolls & Form inputs on any device will be mirrored to all others. clicks - Default: true scroll - Default: true forms - Default: { submit: true, inputs: true, toggles: true }

property host

host?: string | undefined | null;

• Override host detection if you know the correct IP to use null

property hostnameSuffix

hostnameSuffix?: boolean | undefined;

• ¯\_(ツ)_/¯ false

property httpModule

httpModule?: string | undefined;

• Override http module to allow using 3rd party server modules (such as http2) *Note*: these modules are not included in the Browsersync package - you need to 'npm install' any that you'd like to use. undefined 2.18.0

property https

https?: boolean | HttpsOptions | undefined;

• Enable https for localhost development. **Note** - this is not needed for proxy option as it will be inferred from your target url. undefined 1.3.0

property ignore

ignore?: string[] | undefined;

• Patterns for any watchers to ignore. Anything provided here will end up inside watchOptions.ignored [] 2.23.0

property injectChanges

injectChanges?: boolean | undefined;

• Whether to inject changes (rather than a page refresh) true

property injectFileTypes

injectFileTypes?: string[] | undefined;

• ["css", "png", "jpg", "jpeg", "svg", "gif", "webp", "map"]

property injectNotification

injectNotification?: boolean | undefined;

• false

property listen

listen?: string;

• Specify a host to listen on. Use this if you want to prevent binding to all interfaces.

  **Note**: When you specify this option, it overrides the 'host' option undefined

property localOnly

localOnly?: boolean | undefined;

• Support environments where dynamic hostnames are not required (ie: electron) false 2.14.0

property logConnections

logConnections?: boolean | undefined;

• Whether or not to log connections false

property logFileChanges

logFileChanges?: boolean | undefined;

• Whether or not to log information about changed files true

property logLevel

logLevel?: LogLevel | undefined;

• Can be either "info", "debug", "warn", or "silent" "info"

property logPrefix

logPrefix?: string | undefined;

• Change the console logging prefix. Useful if you're creating your own project based on Browsersync "Browsersync" 1.5.1

property logSnippet

logSnippet?: boolean | undefined;

• Log the snippet to the console when you're in snippet mode (no proxy/server) true 1.5.2

property middleware

middleware?:
    | MiddlewareHandler
    | PerRouteMiddleware
    | Array<MiddlewareHandler | PerRouteMiddleware>
    | undefined;

• Functions or actual plugins used as middleware. false

property minify

minify?: boolean | undefined;

• Whether to minify the client script true

property notify

notify?: boolean | undefined;

• The small pop-over notifications in the browser are not always needed/wanted. true

property online

online?: boolean | undefined;

• Some features of Browsersync (such as xip & tunnel) require an internet connection, but if you're working offline, you can reduce start-up time by setting this option to false undefined

property open

open?: OpenOptions | boolean | undefined;

• Decide which URL to open automatically when Browsersync starts. Defaults to "local" if none set. Can be true, local, external, ui, ui-external, tunnel or false true

property plugins

plugins?: any[] | undefined;

• User provided plugins [] 2.6.0

property port

port?: number | undefined;

• Use a specific port (instead of the one auto-detected by Browsersync) 3000

property proxy

proxy?: string | ProxyOptions | undefined;

• Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site. false

property reloadDebounce

reloadDebounce?: number | undefined;

• Wait for a specified window of event-silence before sending any reload events. 500 2.6.0

property reloadDelay

reloadDelay?: number | undefined;

• Time, in milliseconds, to wait before instructing the browser to reload/inject following a file change event 0

property reloadOnRestart

reloadOnRestart?: boolean | undefined;

• Reload each browser when Browsersync is restarted. false

property reloadThrottle

reloadThrottle?: number | undefined;

• Emit only the first event during sequential time windows of a specified duration. 0 2.13.0

property rewriteRules

rewriteRules?: boolean | RewriteRules[] | undefined;

• Add additional HTML rewriting rules. 2.4.0 false

property script

script?: ScriptOptions | undefined;

• Configure the script domain 2.14.0

property scriptPath

scriptPath?: ((path: string) => string) | undefined;

• Alter the script path for complete control over where the Browsersync Javascript is served from. Whatever you return from this function will be used as the script path. undefined 1.5.0

property scrollElementMapping

scrollElementMapping?: string[] | undefined;

• Sync the scroll position of any element on the page - where any scrolled element will cause all others to match scroll position. This is helpful when a breakpoint alters which element is actually scrolling [] 2.9.0

property scrollElements

scrollElements?: string[] | undefined;

• Sync the scroll position of any element on the page. Add any amount of CSS selectors [] 2.9.0

property scrollProportionally

scrollProportionally?: boolean | undefined;

• scrollProportionally: false // Sync viewports to TOP position true

property scrollRestoreTechnique

scrollRestoreTechnique?: string | undefined;

• Decide which technique should be used to restore scroll position following a reload. Can be window.name or cookie "window.name"

property scrollThrottle

scrollThrottle?: number | undefined;

• How often to send scroll events 0

property server

server?: string | boolean | string[] | ServerOptions | undefined;

• Use the built-in static server for basic HTML/JS/CSS websites. false

property serveStatic

serveStatic?: StaticOptions[] | string[] | undefined;

• Add additional directories from which static files should be served. Should only be used in proxy or snippet mode. [] 2.8.0

property serveStaticOptions

serveStaticOptions?: ServeStaticOptions | undefined;

• Options that are passed to the serve-static middleware when you use the string[] syntax: eg: serveStatic: ['./app']. Please see [serve-static](https://github.com/expressjs/serve-static) for details 2.17.0

property single

single?: boolean | undefined;

• Serve an index.html file for all non-asset routes. Useful when using client-routers false 2.23.0

property snippet

snippet?: boolean | undefined;

• You can prevent Browsersync from injecting the connection snippet by passing snippet: false. undefined

property snippetOptions

snippetOptions?: SnippetOptions | undefined;

• You can control how the snippet is injected onto each page via a custom regex + function. You can also provide patterns for certain urls that should be ignored from the snippet injection. 2.0.0

property socket

socket?: SocketOptions | undefined;

• Configure the Socket.IO path and namespace & domain to avoid collisions. path - Default: "/browser-sync/socket.io" clientPath - Default: "/browser-sync" namespace - Default: "/browser-sync" domain - Default: undefined port - Default: undefined clients.heartbeatTimeout - Default: 5000 1.6.2

property startPath

startPath?: string | undefined | null;

• The initial path to load null

property tagNames

tagNames?: TagNamesOptions | undefined;

property timestamps

timestamps?: boolean | undefined;

• Append timestamps to injected files true

property tunnel

tunnel?: string | boolean | undefined;

• Tunnel the Browsersync server through a random Public URL null

property ui

ui?: UIOptions | boolean | undefined;

• Browsersync includes a user-interface that is accessed via a separate port. The UI allows to controls all devices, push sync updates and much more. false

property watch

watch?: boolean | undefined;

• Watch files automatically - this should be used as an alternative to the files option. When this option is used, some directories will be ignored automatically such as node_modules bower_components .sass-cache .vscode .git .idea false 2.23.0

property watchEvents

watchEvents?: WatchEvents | string[] | undefined;

• Specify which file events to respond to. Available events: add, change, unlink, addDir, unlinkDir ["change"] 2.18.8

property watchOptions

watchOptions?: chokidar.WatchOptions | undefined;

• File watching options that get passed along to [Chokidar](https://github.com/paulmillr/chokidar). Check their docs for available options undefined 2.6.0

property xip

xip?: boolean | undefined;

• Requires an internet connection - useful for services such as [Typekit](https://typekit.com/) as it allows you to configure domains such as *.xip.io in your kit settings false

property handle

handle: MiddlewareHandler;

property id

id?: string | undefined;

property route

route: string;

property error

error?:
    | ((
          err: NodeJS.ErrnoException,
          req: http.IncomingMessage,
          res: http.ServerResponse
      ) => void)
    | undefined;

property middleware

middleware?: MiddlewareHandler | undefined;

property proxyReq

proxyReq?:
    | Array<(res: http.IncomingMessage) => void>
    | ((res: http.IncomingMessage) => void)
    | undefined;

property proxyRes

proxyRes?: ProxyResponseMiddleware | ProxyResponseMiddleware[] | undefined;

property reqHeaders

reqHeaders?: ((config: object) => Hash<object>) | undefined;

property target

target?: string | undefined;

property ws

ws?: boolean | undefined;

call signature

(
    proxyRes: http.ServerResponse | http.IncomingMessage,
    res: http.ServerResponse,
    req: http.IncomingMessage
): void;

property fn

fn?:
    | ((
          req: http.IncomingMessage,
          res: http.ServerResponse,
          match: string
      ) => string)
    | undefined;

property match

match: RegExp;

property replace

replace?: string | undefined;

property domain

domain?: string | undefined;

property baseDir

baseDir?: string | string[] | undefined;

• set base directory

property directory

directory?: boolean | undefined;

• enable directory listing

property index

index?: string | undefined;

• set index filename

property middleware

middleware?: Array<MiddlewareHandler | PerRouteMiddleware> | undefined;

• configure custom middleware

property routes

routes?: Hash<string> | undefined;

• key-value object hash, where the key is the url to match, and the value is the folder to serve (relative to your working directory)

property serveStaticOptions

serveStaticOptions?: ServeStaticOptions | undefined;

property async

async?: boolean | undefined;

property blacklist

blacklist?: string[] | undefined;

property rule

rule?:
    | {
          match?: RegExp | undefined;
          fn?: ((snippet: string, match: string) => any) | undefined;
      }
    | undefined;

property whitelist

whitelist?: string[] | undefined;

property clientPath

clientPath?: string | undefined;

property clients

clients?: { heartbeatTimeout?: number | undefined } | undefined;

property domain

domain?: string | undefined;

property namespace

namespace?: string | undefined;

property path

path?: string | undefined;

property port

port?: number | undefined;

property dir

dir: string | string[];

property route

route: string | string[];

property match

match?: mm.Pattern | mm.Pattern[] | undefined;

property once

once?: boolean | undefined;

property css

css?: string | undefined;

property gif

gif?: string | undefined;

property jpeg

jpeg?: string | undefined;

property jpg

jpg?: string | undefined;

property js

js?: string | undefined;

property less

less?: string | undefined;

property png

png?: string | undefined;

property scss

scss?: string | undefined;

property svg

svg?: string | undefined;

property port

port?: number | undefined;

• set the default port

property weinre

weinre?:
    | {
          port?: number | undefined;
      }
    | undefined;

• set the default weinre port