Browsersync 命令行用法

首先要安装 Browsersync，全局安装或局部安装（有利于使用 npm 脚本方式）都可以，然后执行下述任何一个命令:

$ browser-sync start [options]     启动 Browsersync
$ browser-sync init                创建配置文件
$ browser-sync reload              通过 HTTP 协议发送一个重新加载事件
$ browser-sync recipe [name]       针对简单用例创建相关文件

要获得运行某个命令的帮助，请执行 $ browser-sync <command> --help，例如：

# 仅查看 start 命令的帮助信息
$ browser-sync start --help

# 仅查看 recipe 命令的帮助信息
$ browser-sync recipe --help
--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 
# 实例
# 在 `app` 目录下启动服务器，监听所有文件
$ browser-sync start --server 'app' --files 'app'

# 同上，但是适用于 >= 2.23.0 版本
$ browser-sync app -w

# 在 `app` 和 `.tmp` 目录下启动服务器（简写形式）
# (版本要求 2.12.1)
$ browser-sync start -s 'app' '.tmp' -f 'app' '.tmp'

# 同上，但是适用于 >= 2.23.0 版本
$ browser-sync 'app' '.tmp' -w

# 作为 PHP 应用的代理 + 静态文件服务器 & 监听这些文件
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public'

# 同上，但是适用于 >= 2.23.0版本
$ browser-sync 'http://mylocal.dev' 'public' -w

# 依据配置文件启动 Browsersync
$ browser-sync start --config 'conf/browser-sync.js'

# 依据配置文件启动 Browsersync，并且通过命令行参数覆盖配置文件中相同的配置项
$ browser-sync start --config 'conf/browser-sync.js' --port 4000
--output, -o Specify an output directory 
# 实例

# 列出所有的简单用例
$ browser-sync recipe ls

# 为 gulp.sass 简单用例复制文件
$ browser-sync recipe 'gulp.sass'

# 为 gulp.sass 简单用例复制文件到自定义的输出目录
$ browser-sync recipe 'gulp.sass' -o 'my-project'
--files, -f File paths to reload
--port, -p Target a running instance by port number
--url, -u Provide the full the url to the running Browsersync instance 
# 实例

# 重新加载，假定标准地址为 http://localhost:3000
$ browser-sync reload

# 重新加载所有的 css 文件，Browsersync 运行在 http://localhost:4000 地址
$ browser-sync reload --port 4000 --files="*.css"

# 重新加载所有的 css 文件，Browsersync 运行在 https://localhost:3000 地址
$ browser-sync reload --url https://localhost:3000 --files="*.css"

$ browser-sync init

Jump to...