browser-sync & http server

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"

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>

browser-sync & http server的更多相关文章

  1. web页面实时刷新之browser sync

    web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...

  2. Asp.Net连接Mysql报错Out of sync with server

    Asp.Net连接Mysql报错Out of sync with server 原因:程序引用的MySql.Data.dll版本高于服务器版本 解决:下载一个低版本的MySql.Data.dll,项目 ...

  3. asp.net连接MySQL数据库错误-Out of sync with server

    问题 网上说:http://wenda.haosou.com/q/1386389928069965 昨晚这个问题真的费了我不少时间(晚上9到凌晨2点),网上找解决方案,然后一个个尝试,没有成功.准备放 ...

  4. Sql Server 2008卸载后再次安装一直报错

    sql server 2008卸载之后再次安装一直报错问题. 第一:由于上一次的卸载不干净,可参照百度完全卸载sql server2008 的方式 1. 用WindowsInstaller删除所有与S ...

  5. Setting up Django and your web server with uWSGI and nginx

    https://uwsgi.readthedocs.io/en/latest/tutorials/Django_and_nginx.html Setting up Django and your we ...

  6. [r]Setting up Django and your web server with uWSGI and nginx

    Setting up Django and your web server with uWSGI and nginx This tutorial is aimed at the Django user ...

  7. ie11 selenium 报错org.openqa.selenium.NoSuchWindowException: Unable to get browser 处理方法

    selenium + ie11运行报错 org.openqa.selenium.NoSuchWindowException: Unable to get browser (WARNING: The s ...

  8. Debian上安装TightVNC Server

    from:www.penlug.org/twiki/bin/view/Main/TightVNC Using VNC   The tool vncserver allows you to run ad ...

  9. SQL Server 连接问题-TCP/IP

    原文:SQL Server 连接问题-TCP/IP 出自:http://blogs.msdn.com/b/apgcdsd/archive/2012/02/24/ms-sql-server-tcp-ip ...

  10. Server.Transfer VS Response.Redirect – Simplified

    https://www.codeproject.com/Articles/775221/Server-Transfer-VS-Response-Redirect-Simplified Introduc ...

随机推荐

  1. jupyter中添加conda环境

    安装完Anaconda利用conda创建了虚拟环境,但是启动jupyter notebook之后却找不到虚拟环境. 实际上是由于在虚拟环境下缺少kernel.json文件,解决方法如下: 首先安装ip ...

  2. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  3. mysql安装,oracle安装

    mysql 版本:5.5.20 直接是是是装完, 密码设为123456, 检查服务, 然后装navicat 32位,64位均可,连接时输入root,123456. 连接成功!为所欲为操作数据库. ht ...

  4. robotframe 自定义开发库

    site-packages(这个路径一定要在系统path路径中)下面创建一个UserDefineLibrary文件夹:目录结构如下 ---- ----- UserDefineLibrary __ in ...

  5. DB-Engines Ranking

    DB-Engines Ranking trend chart The DB-Engines Ranking ranks database management systems according to ...

  6. 开关电源PCB设计中的布线技巧

    开关电源PCB设计中的布线技巧关键字:布线 开关电源 走线 一.引言 开关电源是一种电压转换电路,主要的工作内容是升压和降压,广泛应用于现代电子产品.因为开关三极管总是工作在 “开” 和“关” 的状态 ...

  7. 动画:view从点逐渐变大(放大效果)

    -(void) animationAlert:(UIView *)view { CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation ani ...

  8. 20155218《网络对抗》Exp3 免杀原理与实践

    20155218<网络对抗>Exp3 免杀原理与实践 一.使用msf生成后门程序的检测 (1)将上周msf生成的后门文件放在virscan.org中进行扫描,截图如下: (2)使用msf时 ...

  9. 2017-2018-2 20155230《网络对抗技术》实验1:PC平台逆向破解(5)M

    1.直接修改程序机器指令,改变程序执行流程 2.通过构造输入参数,造成BOF攻击,改变程序执行流 3.注入Shellcode并执行 4.实验感想 注:因为截图是全屏所以右键图片在新的标签页打开观看更加 ...

  10. 连接到win2003的远程桌面,客户端要如何操作

    第一步:命令行执行mstsc 第二步:处输入开启了远程桌面功能的计算机IP地址.