自从发现了这个 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. STM32之关闭JTAG

    1.有些时候不想用JTAG口(而用SWJ在线调试),把JTAG暂用的IO通过remap出来使用 2.比如48 pin的STM32F103CBT6单片机: GPIO_PinRemapConfig(GPI ...

  2. Python之基本排序算法的实现

    import cProfile import random class SortAlgorithm: def __init__(self,unsortedlist=[]): self.unsorted ...

  3. List、LinkedList、ArrayList、Vector

    目前好像写不出比较高质量的随笔,除了多看看别人写的,就是多写,做好自己可以做的 最近听的和看到的最多的一个词就是“勿忘初心”.的确不少人到了一定高度之后,就不知道该怎么做了.(包括我曾经的偶像娜姐,在 ...

  4. js检测是否可以访问公网服务器

    wifi认证开发过程所用到的,源码如下: 注:检测AC是否放行成功,是否可以访问公网阿里云服务器 功能调用: checkNet().then(function(res) { if(res) { //连 ...

  5. mysql集群压测

    mysql压测 mysql自带就有一个叫mysqlslap的压力测试工具,通过模拟多个并发客户端访问MySQL来执行压力测试,并且能很好的对比多个存储引擎在相同环境下的并发压力性能差别.通过mysql ...

  6. vue2.0 接收url参数

    1) 路由配置传参方式在配置路由时 例如 "/firewall/authorize/:uid/:uname/:token"页面url为 http://XXX.com/firewal ...

  7. freeswitch对话机320信令在专有网络情况下不生效的处理

    昨天处理客户提出的话机设置呼叫转移不生效的问题, 经过多次测试发现这个问题与freeswitch版本和配置没有关系, 后来分析freeswitch正常转移日志与不转移日志发现不转移的日志少了一行 Re ...

  8. 『Python基础-13』函数 Function

    这篇笔记记录的知识点: 函数的基本概念 自定义函数 函数的几种参数 编程的三种方式: 1.OOP 面向对象编程,万物皆对象,以class为主,抽象化 2.POP 面向过程编程,万事皆过程,def定义过 ...

  9. C# base64 转 byte[]

    string转成 Base64 形式的String //byte[] 转string byte[] b = Encoding.Default.GetBytes("字符串"); // ...

  10. GoLand软件免激活的使用方法

    由于官方的Goland软件,免费使用期限是30天.如果你不购买产品的话,就需要不断的卸载和重装软件才能使用.不过要是您的资金允许的话,可以去http://www.jetbrains.com/go/bu ...