browser-sync

https://www.browsersync.io/

usage


# step 1
$ npm install -g browser-sync
# OR
$ npm i -g browser-sync
# step 2
$ cd build
# step 3
$ browser-sync start --server --files "./*.html"
$ browser-sync start --server --files "./*.*"
$ browser-sync start --server --files "./*.js"
$ browser-sync start --server --files "./*.css"

browsersync & node.js & static html.png

react

browsersync-react.md

https://browsersync.io/

$ browser-sync start --server --files "public/*.*"
$ browser-sync start --server --files "./src/**/*.*"
$ browser-sync start --server --files "./public/**/*.*"
# http://localhost:3000/public/index.html
# 必须使用正确的路径
# 1. 在 project 根目录下，运行命令， 默认的 url 根路由，就是当前的路径
# browser-sync start --server --files "./dist/**/*.*" 
# 访问 http://localhost:3000/dist/index.html
# 2. 直接在 dist 目录下，运行命令， 默认的 url 根路由，就是当前的路径
# browser-sync start --server --files "./**/*.*" 
# 访问 http://localhost:3000/index.html

sass & gulp & browser-sync


$ sass --watch src:dist
# root path
$ browser-sync start --server --files "./**/*.*"
$ browser-sync start --server --files "./src/**/*.*"

browser-sync

https://github.com/xgqfrms-GitHub/browser-sync

$ npm install -g browser-sync
$ npm i -S browser-sync

run

$ browser-sync start --server --files "./*.*"

PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation> browser-sync start
[BS] Copy the following snippet into your website, just before the closing </body> tag
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3001/node_modules/browser-sync/browser-sync-client.js?v=2.18.1'><\/script>".replace("HOST", location.hostname));
//]]></script>
[BS] Access URLs:
 -------------------------------------
          UI: http://localhost:3002
 -------------------------------------
 UI External: http://192.168.56.1:3002
 -------------------------------------

$ browser-sync --help
$ browser-sync start --help
$ browser-sync start
$ browser-sync init --help
$ browser-sync reload --help
# 食谱
$ browser-sync recipe --help


PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation> browser-sync --help
Commands:
  start   Start the server
  init    Create a configuration file
  reload  Send a reload event over HTTP protocol
  recipe  Generate the files for a recipe
Options:
  --version  Show version number                                       [boolean]
For help running a certain command, type <command> --help
eg:
C:\Users\xray\AppData\Roaming\npm\node_modules\browser-sync\bin\browser-sync.js
start --help
PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation> browser-sync start --help
Usage:
C:\Users\xray\AppData\Roaming\npm\node_modules\browser-sync\bin\browser-sync.js
start [options]
Options:
  --version               Show version number                          [boolean]
  --server, -s            Run a Local server (uses your cwd as the web root)
  --serveStatic, --ss     Directories to serve static files from         [array]
  --port                  Specify a port to use                         [number]
  --proxy, -p             Proxy an existing server
  --ws                    Proxy mode only - enable websocket proxying  [boolean]
  --browser, -b           Choose which browser should be auto-opened     [array]
  --files, -f             File paths to watch                            [array]
  --index                 Specify which file should be used as the index page
                                                                        [string]
  --plugins               Load Browsersync plugins                       [array]
  --extensions            Specify file extension fallbacks               [array]
  --startPath             Specify the start path for the opened browser [string]
  --https                 Enable SSL for local development
  --directory             Show a directory listing for the server      [boolean]
  --xip                   Use xip.io domain routing                    [boolean]
  --tunnel                Use a public URL
  --open                  Choose which URL is auto-opened (local, external or
                          tunnel), or provide a url                     [string]
  --cors                  Add Access Control headers to every request  [boolean]
  --config, -c            Specify a path to a configuration file        [string]
  --host                  Specify a hostname to use
  --logLevel              Set the logger output level (silent, info or debug)
  --reload-delay          Time in milliseconds to delay the reload event
                          following file changes                        [number]
  --reload-debounce       Restrict the frequency in which browser:reload events
                          can be emitted to connected clients           [number]
  --ui-port               Specify a port for the UI to use              [number]
  --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                  Show help                                    [boolean]
Examples:
  C:\Users\xray\AppData\Roaming\npm\node_m  - Use the App directory to serve
  odules\browser-sync\bin\browser-sync.js   files
  start -s app
  C:\Users\xray\AppData\Roaming\npm\node_m  - Proxy an existing website
  odules\browser-sync\bin\browser-sync.js
  start -p www.bbc.co.uk
PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation>


PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation> browser-sync init --help
Usage:
C:\Users\xray\AppData\Roaming\npm\node_modules\browser-sync\bin\browser-sync.js
init
Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]
Examples:
  C:\Users\xray\AppData\Roaming\npm\node_m
  odules\browser-sync\bin\browser-sync.js
  init
PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation> browser-sync reload --help
Usage:
C:\Users\xray\AppData\Roaming\npm\node_modules\browser-sync\bin\browser-sync.js
reload
Options:
  --version    Show version number                                     [boolean]
  --files, -f  File paths to reload                                      [array]
  --port, -p   Target a running instance by port number                 [number]
  --url, -u    Provide the full the url to the running Browsersync instance
  --help       Show help                                               [boolean]
Examples:
  C:\Users\xray\AppData\Roaming\npm\node_m
  odules\browser-sync\bin\browser-sync.js
  reload
  C:\Users\xray\AppData\Roaming\npm\node_m
  odules\browser-sync\bin\browser-sync.js
  reload --port 4000
PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation>


PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation> browser-sync recipe --help
Usage:
C:\Users\xray\AppData\Roaming\npm\node_modules\browser-sync\bin\browser-sync.js
recipe <recipe-name>
Options:
  --version     Show version number                                    [boolean]
  --output, -o  Specify an output directory
  --help        Show help                                              [boolean]
Examples:
  C:\Users\xray\AppData\Roaming\npm\node_m  list the recipes
  odules\browser-sync\bin\browser-sync.js
  recipe ls
  C:\Users\xray\AppData\Roaming\npm\node_m  use the gulp.sass recipe
  odules\browser-sync\bin\browser-sync.js
  recipe gulp.sass
PS G:\wwwRoot\AngularJS\Angular-1.5.8-App\000-imooc-form-validation>