摘要

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. 7)加了基础控制器Controller.php

    文件目录展示: 改动代码展示: Controller.php <?php /** * Created by PhpStorm. * User: Interact * Date: 2017/8/2 ...

  2. Java子类和父类的初始化执行顺序

    要明白子类和父类的初始化执行顺序,只需要知晓以下三点,就不会再弄错了. 1.创建子类对象时,子类和父类的静态块和构造方法的执行顺序为:父类静态块->子类静态块->父类构造器->子类构 ...

  3. 接受H0的坏处|试验误差|置信度由来|

    生物统计与实验设计 置信度(0.05 0.01)是通过实验次数估计值的分布得到的,它是整个分布的期望,这个值的确立需要具体情况具体分析. 肯定很难,因为否定一次很容易.虽然如果没有否定(eg:得到p= ...

  4. IOC @Autowired/@Resource/@Qulified的用法实例

    首先要知道另一个东西,default-autowire,它是在xml文件中进行配置的,可以设置为byName.byType.constructor和autodetect:比如byName,不用显式的在 ...

  5. jenkins使用(1)

    术语:构建一次job指的是执行一次任务 注:到了公司,如果需要搭建jenkins环境可以找运维 jenkins使用: 创建视图 常用的两个配置: 新建任务: 可以选择构建后的步骤: 然后保存 图标状态 ...

  6. Selenium&Pytesseract模拟登录+验证码识别

    验证码是爬虫需要解决的问题,因为很多网站的数据是需要登录成功后才可以获取的. 验证码识别,即图片识别,很多人都有误区,觉得这是爬虫方面的知识,其实是不对的. 验证码识别涉及到的知识:人工智能,模式识别 ...

  7. Docker Swarm和Kubernetes在大规模集群中的性能比较

    Contents 这篇文章主要针对Docker Swarm和Kubernetes在大规模部署的条件下的3个问题展开讨论.在大规模部署下,它们的性能如何?它们是否可以被批量操作?需要采取何种措施来支持他 ...

  8. SpringMVC 使用注解完成登录拦截

    目录 为了实现用户登录拦截你是否写过如下代码呢? 1. 基于Filter 2. 基于Struts 3. 基于SpringMVC 如何使用自定义注解完成自定义拦截呢? 登录注解 SpringMVC 拦截 ...

  9. Pandorabox固件路由器上申请Let's Encrypt证书,为内网里的多个web服务提供SSL支持

    对于家中宽带有公网IP的用户,有时我们需要将路由器内部网络的某些web服务通过端口转发暴露到外网(例如NAS远程访问),但HTTP是明文传输,有被监听的风险:如果在NAS上使用自签名证书,再端口转发, ...

  10. 《OneForAll框架搭建之旅》前端篇:微前端架构设计(Vue)

    心之所向,勇往直前!记录开发过程中的那些小事,给自己加点经验值. 前言 作为一个.Net后端开发,在竞争愈加激烈的当下,掌握点前端配菜好像已经是家常便饭了. 刚好在工作的第5个年头,辞去小主管职务的我 ...