自从发现了这个 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. 轻量ORM-SqlRepoEx （六） JOIN

    示例使用的是最新 SqlRepoEx 2.0.2 可在:https://github.com/AzThinker/SqlRepoEx2.0Demo 或:https://gitee.com/azthin ...

  2. PHP的抽象类和抽象方法以及接口总结

    PHP中的抽象类和抽象方法自己用的不多,但是经常会在项目中看到别人使用,同样,今天在看别人的代码的时候,发现使用了抽象类,就总结下: 抽象类:1.如果一个类中有一个方法是抽象方法,则这个类就是抽象类: ...

  3. $.extend() 合并问题

  4. JZOJ 4273. 【NOIP2015模拟10.28B组】圣章-精灵使的魔法语

    4273. [NOIP2015模拟10.28B组]圣章-精灵使的魔法语 (File IO): input:elf.in output:elf.out Time Limits: 1000 ms  Mem ...

  5. thinkphp3.2.3 HTML 页面跳转

    1.   http://域名/index.php(入口文件)/模块/控制器/方法 2.{:U('控制器/方法')}

  6. php 算法（冒泡排序）

    //冒泡排序(从小到大)       (从大到小改变for循环中的大于号为小于号即可)    public function index(){          $arr = array(1,8,3, ...

  7. laravel4.2 union联合，join关联分组查询最新记录时，查询条件不对，解决方案

    需求: 分组联合查询,或者最新记录. 问题:  mysql分组的时候默认会查询第一条记录,存在gourp by时 order by 无效. 一般解决办法就是 ,select * from ( sele ...

  8. URL和报文知识总结 ——1

    第一部分:浏览器生成的消息 关键词:URL的解析  HTTP请求的生成  DNS服务器 1.URL(网址)的构成: 对于一个网址的解析: https://i.cnblogs.com/index.htm ...

  9. Leecode刷题之旅-C语言/python-349两个数组的交集

    /* * @lc app=leetcode.cn id=349 lang=c * * [349] 两个数组的交集 * * https://leetcode-cn.com/problems/inters ...

  10. 关于指针的笔记【1】【C语言程序设计-谭浩强】

    指针是什么? 一个 变量的地址称为该变量的"指针"[将地址形象化的称为“指针”].(指针是什么百度百科) 注意区分储存单元的地址和内容这两个概念的区别. 直接访问:直接按变量名进行 ...