自从发现了这个 browsersync 插件 ...

在也不用每次改一行代码就去手动刷新 HTML 页面了
省去了很多繁琐的操作，当有多个显示器的时候，更加的方便，在IDEA上编辑代码之后，点击 command + s 保存之后即可马上在另外的显示器上看到 HTML 效果的改动。

安装

前置条件

BrowserSync 是基于 Node.js 的。是一个 Node 模块。因此安装之前先安装一下 Node.js

安装 BrowserSync

使用命令安装，若报错，前面加 sudo

npm install -g browser-sync

使用

cd 到项目文件夹，使用下列命令，监听所有文件即可

browser-sync start --server --files="**/*"

之后会弹出 HTML 页面，或者通过 http://localhost:3000/ 进行访问。

相关网站与文档

http://www.browsersync.cn/

browsersync 插件的更多相关文章

  1. gulp自动刷新插件

    gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm in ...

  2. gulp + browserSync 一起提高前端开发效率吧！

    前端开发的时候,每次修改代码后,要移动鼠标到浏览器选中再刷新查看效果,不知觉间我们的加班的时间又增加了0.5s, 真是罪孽!所以在使用gulp之后,就一直对能自动监听文件刷新页面的browserSyn ...

  3. webpack与browser-sync热更新原理深度讲解

    本文首发于CSDN网站,下面的版本又经过进一步的修订.原文:webpack与browser-sync热更新原理深度讲解本文包含如下内容: webpack-hot-middleware EventSou ...

  4. 由VMnet引起的browser-sync故障解决方案

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月11日) 今天晚上,前端组的小伙伴问我说能不能帮忙看看他的电脑为什么在安装了browser-sync插件以后, ...

  5. vue 项目使用局域网多端访问并实时自动更新（利用 browser-sync）

    在写vue的项目中时,虽然vue会自动更新页面,但是切换页面切来切去也很麻烦,有时候我们还要在公司另一台电脑或者手机上调试,这时候利用browser-sync插件,无需改动vue的代码即可实现: 1. ...

  6. 前端工具之Gulp

    Gulp是一款前端自动化的工具,如果能熟练使用Gulp来进行开发一定可以节省很多的时间,也可以快速的提高工作效率. 在使用Gulp之前就是要配置好Gulp安装的环境,这是我们能使用Gulp快速开发的第 ...

  7. 自动化前端构建工具--gulp

    Gulp是一个基于任务的javascript工程命令行流式构建工具.为什么要用Gulp呢?前端开发进入到工程化阶段,我们需要压缩合并文件,加MD5戳:如果使用 CoffeeScript/ES6 去代替 ...

  8. Gulp 学习总结

    Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS.  http://nodejs.org/download/ 安装 ...

  9. [转发]Gulp开发教程（翻译）

    Building With Gulp =================== 转载出处 原文地址 翻译出处 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的 ...

随机推荐

  1. unittest单元测试框架之测试用例的跳过（skip） （六）

    1.跳过测试用例的方法 @unittest.skip("don't run this case!"): @unittest.skipIf(3<2,"don't ru ...

  2. RockBrain USB Server- 云计算虚拟化USB设备集中管理、远程共享解决方案（涉及银企直联）

    RockBrain USB Server- 云计算虚拟化USB设备集中管理.远程共享解决方案(涉及银企直联) 技术需求: 1．企业员工的大量USB Key,需要将key接入USB Server虚拟池, ...

  3. GoldenGate -- OGG EXTRACT进程 OGG-00446 报错

    -- :: INFO OGG- Positioning to (Thread ) Sequence , RBA , SCN 0.470706262. Source Context : SourceMo ...

  4. JavaScript Event Loop和微任务、宏任务

    为什么JavaScript是单线程? JavaScript的一大特点就是单线程, 同一时间只能做一件事情,主要和它的用途有关, JavaScript主要是控制和用户的交互以及操作DOM.注定它是单线程 ...

  5. 复习宝典之Spring

    查看更多宝典,请点击<金三银四,你的专属面试宝典> 第六章:Spring Spring容器是Spring的核心,一切Spring bean都存储在Spring容器内,并由其通过IoC技术管 ...

  6. MySQL的空值和NULL区别

    从本质上区别: 1.空值不占空间 2.null值占空间   通俗的讲: 空值就像是一个真空转态杯子,什么都没有,而null值就是一个装满空气的杯子,虽然看起来都是一样的,但是有着本质的区别.     ...

  7. 解决ajax请求(SpringMVC后台)响应415/400/405错误

    解决ajax请求(SpringMVC后台)响应415/400/405错误 后端代码 bean public class user { private String username; private ...

  8. MySQL---正确使用索引、limit分页、执行计划、慢日志查询

    正确使用索引 数据库表中添加索引后确实会让查询速度起飞,但前提必须是正确的使用索引来查询,如果以错误的方式使用,则即使建立索引也会不奏效.即使建立索引,索引也不会生效: - like '%xx' se ...

  9. .Net Core如何在程序的任意位置使用和注入服务

    最近有人问我:我该如何在Startup类之外的地方注入我的服务呢,都写在startup里看着好乱:我该如何在程序的其他地方获取我注入的服务呢: 故我写了这篇博客,文中有不对的地方欢迎指正. 一.如何在 ...

  10. 分布式缓存 Redis(二)

    代码实例 namespace RedisTest { class Program { static void Main(string[] args) { Student stu = RedisOper ...