BrowserSync 可以自动同步更新编辑器修改的html\css\js和其他任何文件,实时修改实时生效。
安装
需要基于 npm 安装
全局安装 Browsersync
npm install -g browser-sync
本地项目安装 Browsersync
npm install browser-sync --save-dev
通过这种方式,可以将依赖项添加到您的 package.json 文件
使用
同步当前目录下所有css、html、js、jpg、png、webp、gif
browser-sync start --server --files "**/*.css, **/*.js, **/*.jpg, **/*.jpeg, **/*.png, **/*.gif, **/*.webp, **/*.html"
功能增强
让 BrowserSync 在本地主机支持 HTTPS
参考命令帮助
browser-sync help
Browsersync options: https://browsersync.io/docs/options
Usage: browser-sync start [options]
命令:
start Start the server
init Create a configuration file
reload Send a reload event over HTTP protocol
recipe Generate the files for a recipe
选项:
--version 显示版本号 [布尔]
--server, -s Run a Local server (uses your cwd as the web root)
--cwd Working directory [字符串] [默认值: (生成的值)]
--json If true, certain logs will output as json only [布尔]
--serveStatic, --ss Directories to serve static files from [数组]
--port Specify a port to use [数字]
--proxy, -p Proxy an existing server
--ws Proxy mode only - enable websocket proxying [布尔]
--browser, -b Choose which browser should be auto-opened [数组]
--watch, -w Watch files [布尔]
--ignore Ignore patterns for file watchers [数组]
--files, -f File paths to watch [数组]
--index Specify which file should be used as the index page
[字符串]
--plugins Load Browsersync plugins [数组]
--extensions Specify file extension fallbacks [数组]
--startPath Specify the start path for the opened browser [字符串]
--single If true, the connect-history-api-fallback middleware
will be added [布尔]
--https Enable SSL for local development
--directory Show a directory listing for the server [布尔]
--xip Use xip.io domain routing [布尔]
--tunnel Use a public URL
--open Choose which URL is auto-opened (local, external or
tunnel), or provide a url [字符串]
--cors Add Access Control headers to every request [布尔]
--config, -c Specify a path to a configuration file [字符串]
--host Specify a hostname to use
--listen Specify a hostname bind to (this will prevent binding
to all interfaces)
--logLevel Set the logger output level (silent, info or debug)
--reload-delay Time in milliseconds to delay the reload event
following file changes [数字]
--reload-debounce Restrict the frequency in which browser:reload events
can be emitted to connected clients [数字]
--ui-port Specify a port for the UI to use [数字]
--watchEvents Specify which file events to respond to [数组]
--no-notify Disable the notify element in browsers
--no-open Don't open a new browser window
--no-online Force offline usage
--no-ui Don't start the user interface
--no-ghost-mode Disable Ghost Mode
--no-inject-changes Reload on every file change
--no-reload-on-restart Don't auto-reload all browsers following a restart
--help 显示帮助信息 [布尔]
示例:
browser-sync start -s app - Use the App directory to serve files
browser-sync start -p www.bbc.co.uk - Proxy an existing website
For help running a certain command, type <command> --help
browser-sync start --help
You can run a static server by providing a path(s) directly
browser-sync app/src app/tmp
If the directory contains a 'index.html' file, you can omit any input
browser-sync
You can run the proxy in this manner too
browser-sync https://example.com
To run a proxy, whilst also serving static files
browser-sync https://example.com htdocs/themes/example