摘要

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. jmeter如何解决乱码问题

    使用jmeter的时候时常遇到中文乱码的情况,下面总结一下几个解决方法,方便以后进行复习. 1.添加后置处理器Beanshell PostProcessor,在输入框内写入“prve.setDateE ...

  2. linux在线书籍

    <Linux就该这么学-刘遄>https://www.linuxprobe.com/

  3. 吴裕雄--天生自然python学习笔记:Python3 标准库概览

    操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...

  4. iText 中文无法显示

    /** * 导出PDF工具com.lowagie.itext测试 * * @param response * @throws IOException * @throws DocumentExcepti ...

  5. Word目录生成

    之所以写这篇文章,是因为每次写报告都需要生成相应目录,但常常只记得个大概,最终还得要重新百度,十分头疼,故在此记录一下. 大概分为3个步骤 步骤1 设置标题级数 进入大纲模式 选择相应级数,这里选的是 ...

  6. canvas基本

    基本 支持ie 9+,firefox,opera,chrome,safari html: <canvas id="fir_canvas" width="400&qu ...

  7. jmeter+ant+jenkins 接口自动化测试持续集成(送源码)

     9.1  安装和介绍 JMeter 安装文件路径:https://pan.baidu.com/s/1kVJdnuv. JMeter 是轻量级的开源且稳定的自动化测试工具. 思路:在接口说明文档中整理 ...

  8. 通过ELK快速搭建集中化日志平台

    ELK就是ElasticSearch + LogStash + Kibana 1.准备工作 ELK下载:https://www.elastic.co/downloads/ jdk version:1. ...

  9. flume install

    flume install flume 安装 123456 [root@10 app][root@10 app]# mv apache-flume-1.7.0-bin /mnt/app/flume[r ...

  10. WiredTiger运行时参数优化

    MongoDB的WiredTiger存储引擎,用了一段时间,遇到了一些问题,通过优化WT参数,也解决了一些问题,做个小结. cache_size 指定WT存储引擎内部cache的内存用量上限. 需要注 ...