自从发现了这个 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. Many-to-many relationships in EF Core 2.0 – Part 4: A more general abstraction

    In the last few posts we saw how to hide use of the join entity from two entities with a many-to-man ...

  2. 阿里云云服务器Windows Server 2012 R2无法安装IIS等组件的解决办法

    Windows Server2012 R2数据中心版 不管安装什么组件,都显示存储空间不足,无法应用命令,错误代码0x80070008. 最终确认是服务器配置过低的原因,因为这个型号是低级别的配置,1 ...

  3. CSS3-transition常用属性及示例

    transition参数 语法 transition: property duration timing-function delay transition属性是个复合属性,她包括以下几个子属性: t ...

  4. day01 三级菜单

    知识点: 字典, for 循环,if ...else 嵌套 永辉超市 = { '食品饮料':{ '休闲食品':{ '坚果':['山核桃','腰果'], '炒货':['瓜子','花生'] }, '牛奶' ...

  5. ABAP术语-Transaction

    Transaction 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/19/1112804.html Logical process in ...

  6. excel批量转换为CSV格式，xls批量导出csv格式

    工具/原料   excel 2013 地址链接:http://pan.baidu.com/s/1c1ZABlu 密码:d3rc 方法/步骤     首选我们把需要导出为CVS的Excel文件整理集中到 ...

  7. 关于linux‘RedHat6.9在VMware虚拟机中的安装步骤

    redhat支持多种安装方式:光盘安装,硬盘安装和网络安装等,可以根据个人的实际情况来选择.我在这里选择的是光盘安装的方式安装RHEL6.9.(以下简称6.9) 1.首先准备好6.9的光盘镜像,在安装 ...

  8. IE8 如何 不显示 选项 卡，直接在任务显示 各个页面？

    IE8  如何 不显示 选项 卡,直接在任务显示 各个页面? 在  工具->Internet 选项(o) ->常规--选项卡-设置->把第一个勾去掉  “启用选项卡浏览(需要重新启动 ...

  9. mysql的数据类型与表约束

    数据类型 (详细数据类型请参考:http://www.runoob.com/mysql/mysql-data-types.html) 数字 整型  tinyint int bigint 小数: flo ...

  10. Qt udp 主机和虚拟机无法互相广播

    描述: 主机和虚拟机可以ping通,port没被占用,虚拟机可以向主机广播,但是主机不能向虚拟机广播 原因: 虚拟机只配置了一个适配器,而主机有多个适配器,当虚拟机广播时,只能使用和主机连接的适配器, ...