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

view

参考命令帮助

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

相关链接


回到顶部

Copyright © 2017-2024 1px.run 像素教程 Distributed by an MIT license.

Site updated at 2024-12-20 08:28