美文网首页
BrowserSync 自动同步刷新页面

BrowserSync 自动同步刷新页面

作者: 饥人谷_Chou | 来源:发表于2017-10-24 21:04 被阅读0次

BrowserSync 自动同步刷新页面

BrowserSync可以在多个设备的浏览器上实现同步刷新页面,可以显著地提高页面开发效率。

前置条件

命令行工具

Node.js 和 npm

具体下载地址和安装方法请查看【前端开发工具.md】

安装

如果你在中国大陆,建议先运行以下命令让 npm 使用阿里提供的镜像。

$ npm configsetregistry https://registry.npm.taobao.org

运行以下命令安装 BrowserSync

$ npm install -g browser-sync

启动

此处假设你开发的是静态网页。

首先执行cd命令进入项目文件夹,如Code/Github/var

$cd Code/Github/var

执行命令 browser-sync start --server --files .

$ browser-sync start --server --files.[BS] Access URLs: -------------------------------------      Local: http://localhost:3000    External: http://192.168.1.20:3000 -------------------------------------          UI: http://localhost:3001 UI External: http://192.168.1.20:3001 -------------------------------------[BS] Serving files from: ./[BS] Watching files...

运行命令后,BrowserSync 会自动打开一个浏览器页面访问http://localhost:3000

移动设备(在同一网络下,如家里 WIFI), 可以访问External: http://192.......:3000处提供的具体地址访问页面。

关闭 BrowserSync

使用完毕后,在命令行界面按 Control + C 关闭 BrowserSync。

参考链接 

https://www.browsersync.io

相关文章

  • BrowserSync 自动同步刷新页面

    BrowserSync 自动同步刷新页面 BrowserSync可以在多个设备的浏览器上实现同步刷新页面,可以显著...

  • BrowserSync自动刷新

    BrowserSync是基于Node.js的, 是一个Node模块 注意事项: 1. 目录下要有index.htm...

  • BrowserSync的安装和使用

    BrowserSync真是前端必备神器,浏览器同步工具。简单来说就是当你保存文件的同时浏览器自动刷新网页,省去了手...

  • atom必备插件

    Structure-View 显示各种函数名称 同步实时更新html预览 js自动补全 自动刷新页面 conten...

  • 前后端技术知识 - 收藏集 - 掘金

    Express 结合 Webpack 的全栈自动刷新 - 阅读 - 掘金在以前的一篇文章BrowserSync,迅...

  • browsersync浏览器自动刷新工具

    browsersync能让浏览器自动刷新、快速响应您的文件更改(html、js、css、sass、less等)并自...

  • 实现页面刷新跳转的方法

    一、实现页面刷新的方法 1、实现页面刷新的方法 2、实现页面自动刷新的方法 二、实现页面跳转的方法 1、实现页面跳...

  • webpack-dev-server命令行

    1.webpack-dev-server是一个轻量级的服务器,修改文件源码后,自动刷新页面将修改同步到页面上 2....

  • 调试工具

    浏览器同步调试工具: BrowserSync 安装(推荐全局安装): 启动BrowserSync 静态网站 如果想...

  • JS刷新页面及页面跳转

    返回上一页 刷新页面 自动刷新页面 关闭窗口或者打开窗口时刷新页面

网友评论

      本文标题:BrowserSync 自动同步刷新页面

      本文链接:https://www.haomeiwen.com/subject/dzgwhxtx.html