@types/browser-sync
- Version 2.29.0
- Published
- 27.5 kB
- 4 dependencies
- MIT license
Install
npm i @types/browser-sync
yarn add @types/browser-sync
pnpm add @types/browser-sync
Overview
TypeScript definitions for browser-sync
Index
Variables
Interfaces
Options
- browser
- callbacks
- clientEvents
- codeSync
- cors
- cwd
- excludeFileTypes
- files
- ghostMode
- host
- hostnameSuffix
- httpModule
- https
- ignore
- injectChanges
- injectFileTypes
- injectNotification
- listen
- localOnly
- logConnections
- logFileChanges
- logLevel
- logPrefix
- logSnippet
- middleware
- minify
- notify
- online
- open
- plugins
- port
- proxy
- reloadDebounce
- reloadDelay
- reloadOnRestart
- reloadThrottle
- rewriteRules
- script
- scriptPath
- scrollElementMapping
- scrollElements
- scrollProportionally
- scrollRestoreTechnique
- scrollThrottle
- server
- serveStatic
- serveStaticOptions
- single
- snippet
- snippetOptions
- socket
- startPath
- tagNames
- timestamps
- tunnel
- ui
- watch
- watchEvents
- watchOptions
- xip
Type Aliases
Variables
variable browserSync
const browserSync: browserSync.BrowserSyncStatic;
Interfaces
interface BrowserSyncInstance
interface BrowserSyncInstance {}
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
interface BrowserSyncStatic
interface BrowserSyncStatic extends BrowserSyncInstance {}
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.
interface CallbacksOptions
interface CallbacksOptions {}
property ready
ready: (err: Error, bs: BrowserSyncInstance) => void;
interface FileCallback
interface FileCallback {}
interface FormsOptions
interface FormsOptions {}
interface GhostOptions
interface GhostOptions {}
interface Hash
interface Hash<T> {}
index signature
[path: string]: T;
interface HttpsOptions
interface HttpsOptions {}
interface MiddlewareHandler
interface MiddlewareHandler {}
call signature
(req: http.IncomingMessage, res: http.ServerResponse, next: () => void): any;
interface Options
interface Options {}
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 tofalse
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
orfalse
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
orcookie
"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
orsnippet
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 asnode_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
interface PerRouteMiddleware
interface PerRouteMiddleware {}
interface ProxyOptions
interface ProxyOptions {}
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;
interface ProxyResponseMiddleware
interface ProxyResponseMiddleware {}
call signature
( proxyRes: http.ServerResponse | http.IncomingMessage, res: http.ServerResponse, req: http.IncomingMessage): void;
interface RewriteRules
interface RewriteRules {}
interface ScriptOptions
interface ScriptOptions {}
property domain
domain?: string | undefined;
interface ServerOptions
interface ServerOptions {}
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;
interface SnippetOptions
interface SnippetOptions {}
interface SocketOptions
interface SocketOptions {}
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;
interface StaticOptions
interface StaticOptions {}
interface StreamOptions
interface StreamOptions {}
interface TagNamesOptions
interface TagNamesOptions {}
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;
Type Aliases
type LogLevel
type LogLevel = 'info' | 'debug' | 'warn' | 'silent';
type OpenOptions
type OpenOptions = 'local' | 'external' | 'ui' | 'ui-external' | 'tunnel';
type WatchEvents
type WatchEvents = 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir';
Package Files (1)
Dependencies (4)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/browser-sync
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/browser-sync)
- HTML<a href="https://www.jsdocs.io/package/@types/browser-sync"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2914 ms. - Missing or incorrect documentation? Open an issue for this package.