自从发现了这个 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. Java 循环结构

    Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...

  2. 在js中获取request域中的内容

    1.可以使用小脚本<%%>实现: var pro_id=<%request.getPro_id()%>; 2.使用隐藏域实现: <input type="hid ...

  3. 19-3-6Python中字典的解释、使用、嵌套

    一.字典 为什么学字典: 列表的缺点: 1.列表如果存储的数据比较多,那么他的查询速度相对慢. 2.列表存储的数据关联性不强. 字典是什么: Python基础数据类型之一:字典. Python中唯一的 ...

  4. git获取步骤

    $ git init $ git config --global user.name "[name]" $ git config --global user.email [emai ...

  5. Mybatis根据数据库中的表自动生成Bean对象与Mapper文件 (小白式教程)

    示例IDE采用 IDEA //**********************华丽的分割线****************// 1.新建一个java项目-->在Src目录下创建3个包(Package ...

  6. 移动端利用canvas画布简单实现刮刮乐效果

    为了研究canvas一些属性简单实现的一个小效果  代码样式不太规范 随手写的 请问喷 初学者可以看下 css代码 <style> * { margin: 0; padding: 0; } ...

  7. nginx的docker化部署

    nginx的docker化有一个隐藏的坑,就是其默认的配置目录(/etc/nginx)需要先从容器中拷贝出来. 拉取镜像 docker pull nginx 启动容器 docker run -d -- ...

  8. mysql 操作表结构

    整理一下对mysql表结构的简单操作,dos窗口模式的,现在基本上都是些图形化操作mysql,像这种命令形式的少了很多,暂时记忆点,以防以后忘记. 从数据库的创建开始: show databases; ...

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

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

  10. git 之忽略文件 gitignore 创建和使用规则

    1..gitignore文件的创建:首先要强调一点,这个文件的完整文件名就是“.gitignore”,注意最前面有个“.”.这样没有扩展名的文件在Windows下不太好创建,这里给出win7的创建方法 ...