摘要

Browsersync能让浏览器实时、快速响应您的文件更改(HTML、JavaScript、CSS、Sass、Less、PHP、Python等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。1

安装环境

  • Windows系统

下载与安装

下载安装 Node.js

因为BrowserSync是基于Node.js的, 是一个Node模块,所以使用之前需要安装Node.js

点击下载 Node.js

安装Node.js就像安装普通软件一样,此处省略安装流程

检查Node.js是否安装成功

(Windows使用CMD)输入命令行: node -v [用于查看Node.js是否安装成功,显示Node.js版本号,则表示安装成功。如图下所示:

$ node -v
v10.16.0

安装 BrowserSync

从Node.js的包管理(NPM[全称:Node.js Package Manager])库中安装BrowserSync
打开终端,输入以下命令行

npm install -g browser-sync

常见问题

错误:
....Unsupported platform for fsevents......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN glodon-satic-model@1.0.0 No repository field.

原因:
fsevent是在macOS下的依赖包,因为当前系统是Windows,因此只报warning信息2
解决方法:
Windows系统忽视该错误,即可。

参考


  1. http://www.caotama.com/90906.html

  2. http://browsersync.cn

BrowserSync(前端利器—保存代码后,自动刷新浏览器)的更多相关文章

  1. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  2. vscode保存代码,自动按照eslint规范格式化代码设置

    # vscode保存代码,自动按照eslint规范格式化代码设置 编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目, ...

  3. 黄聪:PHP如何实现延迟一定时间后自动刷新当前页面、自动跳转header("refresh:1;url={$url}");

    //1秒后自动跳转 header("refresh:1;url={$url}"); exit; //1秒后自动刷新当前页面header("refresh:1;" ...

  4. 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器

    http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...

  5. webpack热加载:修改文件自动刷新浏览器并更新

    概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...

  6. django 调试 监控文件变化 自动刷新浏览器

    问题描述:修改html js py等文件后,自动刷新浏览器,解放F5,提高效率 解决办法:使用gulp,使用bowerSync 关于gulp,可以查看系列教程 关于bowerSync,查看官网 关于结 ...

  7. 更为简单的Ctrl+S自动刷新浏览器工具-LinrF5

    一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...

  8. 哇 真的是一个好插件!!!Sublime Text编辑文件后快速刷新浏览器

    http://9iphp.com/web/html/sublime-text-refresh-browser.html这篇博文咯 来源:[Tips]Sublime Text编辑文件后快速刷新浏览器 - ...

  9. autoOpenBrowser: true, 运行npm后自动打开浏览器

    autoOpenBrowser: true, 运行npm后自动打开浏览器

随机推荐

  1. Kintinuous解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. Kintinuous是Thomas Whelan在National University of Ireland Maynooth读博期间的工作,有 ...

  2. ASP.NET ASHX 一般处理程序教程

    你不想创建一个普通ASP.NET的Web窗体页.而又要通过一个查询字符串返回一个动态的图片.XML或者非HTML网页.这是一个用C#编程语言编写的使用ASHX(一般处理程序)的简单教程. 简介 首先, ...

  3. 关于angular2跳路由防止页面刷新的做法(Angular2路由重载)

    simpleReuseStrategy.ts // 创建重用策略 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStr ...

  4. node 环境下简单web服务器搭建代码

    零.前置 已经安装 node 环境. 一.代码片段 var http = require('http'); var path = require('path'); var fs = require(' ...

  5. ArrayList查找和添加元素问题

    问题描述: 如上图所示,如果依靠迭代器在List中查找元素并添加元素,会报错:java.util.ConcurrentModificationException原因是在添加元素后,List本身发生了变 ...

  6. TCP/IP 协议栈初识

    原文:深入浅出 TCP/IP 协议栈 0. 简介 TCP/IP 协议栈是网络通信中一系列网络协议的综合,是核心骨架.它定义了电子设备接入因特网.以及数据在它们之间的传输方式,是一份标准.TCP/IP ...

  7. 传统if 从句子——以条件表达式作为if条件

    传统if 从句子——以条件表达式作为 if条件if [ 条件表达式 ]then command command commandelse command commandfi   条件表达式 文件表达式 ...

  8. toString()和强制类型转换(String)的用法

    原来是String类型的才可以强转到String,不然会报 ClassCastException异常: 所有的引用类型都从Object类继承了toString方法.

  9. 这是100年后火星的未来,到处都是CBD!

    ​火星是个荒漠之地,尽管如此,最近几十年人类一直准备登录火星,然后殖民火星.随着科技的迅猛发展,感觉火星离我们越来越近了.不过,人类如何在火星上生存下去,这一直是科学家们最热衷的话题. ​意大利建筑师 ...

  10. 我的学习归纳方法(以学习Maven为例)

    以我的个人角度来看待学习这件长久的事,希望对你有帮助,也希望你能提一下你的意见 本文初衷 把自己模板化 以此篇为引,与同行沟通心得,所以在此严重要求如果你有对应的心得还请能回复下,真心感谢!(鞠躬) ...