browsersync——代码变动实时更新到页面

一、准备

nodejs安装教程:https://blog.csdn.net/FED_AF/article/details/105747632

二、安装

npm install -g browser-sync

三、用法

# 启动监听服务器,执行前要先切换到项目路径,**代表递归监听,--no-open启动时不触发默认浏览器
browser-sync start --no-open --server --files "**/*.html, **/*.css, **/*.js"
# browser-sync start --server --files "**"     监听当前路径下所有文件
# browser-sync start --server --files "**/*.html"     监听当前路径下所有html文件
# browser-sync start --server --files "**" --index "src/index.html"    监听当前路径下所有文件,并指定当前路径/src/index.html为索引文件(入口)
[Browsersync] Access URLs:
 ----------------------------------------
       Local: http://localhost:3000          /*本地监听*/  
    External: http://192.168.188.128:3000    /*外部监听*/
 ----------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless
environment, you might want to set the open option to false)
[Browsersync] Reloading Browsers...

之后就可以在通过3000端口访问项目了。

四、补充

  • 启动browser-sync前要切换到项目根路径
  • 远程访问的话记得browser-sync端关闭防火墙或开放TCP3000端口
  • 通过3001端口访问browser-sync的配置页面
  • 项目主页默认是index.html
  • 多终端同步还没玩过
  • 官方文档说支持IE8+,实测不支持IE8
  • 后来发现webpack的devserver完全可以取代browser-sync,但比起devserver,browser-sync配置简单,且容易上手
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值