摘要

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. 第一课 安装wamp环境

    1.准备 怎样选择PHP的版本 IIS 如果想使用IIS配置PHP的话,那么需要选择Non-Thread Safe(NTS)版本的PHP Apache 如果你是用的Apache的版本来自Apache ...

  2. Hadoop伪分布式HDFS环境搭建和使用

    1.环境要求 Java版本不低于Hadoop要求,并配置环境变量 2.安装 1)在网站hadoop.apache.org下载稳定版本的Hadoop包 2)解压压缩包 检查Hadoop是否可用 hado ...

  3. win10安装CAD失败,怎么强力卸载删除注册表并重新安装

    一些搞设计的朋友在win10系统下安装CAD失败或提示已安装,也有时候想重新安装CAD的时候会出现本电脑windows系统已安装CAD,你要是不留意直接安装CAD,只会安装CAD的附件或者直接提示失败 ...

  4. 接口测试-chap3-https请求证书问题

    接口地址如果是HTTPS,需要安装证书,或者在发送请求时传入参数verify=False,表示忽略 res = requests.get(url, verify=False)

  5. 常见PHP安全网站漏洞及防范措施

    一:常见PHP安全网站漏洞 对于PHP的漏洞,目前常见的漏洞有五种.分别是Session文件漏洞.SQL注入漏洞.脚本命令执行漏洞.全局变量漏洞和文件漏洞.这里分别对这些漏洞进行简要的介绍. 1.se ...

  6. SWUST OJ NBA Finals(0649)

    NBA Finals(0649) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 404 Accepted: 128   Descri ...

  7. 杂记:VMware中为mac虚拟机扩容

    之前在VMware中安装Mac虚拟机时,硬盘选的是默认的40G,后来用的过程中随着软件的安装,特别是安装完Xcode和QT5.9之后,可用空间只剩不到3G,每次开机之后都会提醒空间不足,需要清理空间, ...

  8. History of AI

    人工智能的历史源远流长.在古代的神话传说中,技艺高超的工匠可以制作人造人,并为其赋予智能或意识.[1]现代意义上的AI始于古典哲学家用机械符号处理的观点解释人类思考过程的尝试.20世纪40年代基于抽象 ...

  9. android 中webview的屏幕适配问题

    两行代码解决WebView的屏幕适配问题 一个简单的方法,让网页快速适应手机屏幕,代码如下 1 2 WebSettings webSettings= webView.getSettings(); we ...

  10. 从谷歌到脸书:为何巨头纷纷“钟情于”VR相机?

    VR的火爆,自然无需多言.而基于VR这一个概念,已经在多个相关行业不断衍生出新的产品.服务或内容.VR眼镜.VR头盔.VR相机.VR游戏.VR影视.VR应用--但VR产业的发展并不是齐头并进,而是出现 ...