自从发现了这个 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. mysql where 加 多个 或者条件

    select * from table where id=1 and uid=2 and (status=2 or status=3 or status=4);

  2. linux下安装rar

    1. sudo wget https://www.rarlab.com/rar/rarlinux-x64-5.5.0.tar.gz 2.解压 tar -zxf rarlinux-5.0.1.tar.g ...

  3. mysql获取正在运行的sql

    select id,db,host,time,info,command from information_schema.processlist where command<>'sleep' ...

  4. datatable去掉表头默认排序

    禁用排序:"ordering":false 某一列禁用排序:"orderable":false 以某一列排序:"order":[[x,&qu ...

  5. linux系统基础之---文件系统（基于centos7.4 1708）

  6. 详解PreparedStatement

    详解PreparedStatement /** * PrepareStatement 测试插入数据库 */ /** * 如果使用Statement,那么就必须在SQL语句中,实际地去嵌入值,比如之前的 ...

  7. Docker学习——gitlab部署

    Gitlab 下载镜像 docker pull hub.c.163.com/gutenye/gitlab-ce:latest 查看镜像 docker images 启动容器 宿主机和docker的端口 ...

  8. s3c2440中断控制器操作

    一.ARM中断体系结构 arm有7中异常工作模式 用户模式.快中断模式.管理模式.数据访问终止模式.中断模式.系统模式.未定义指令终止模式. 几种模式有什么不同呢, 1.不同的寄存器 2.不同的权限 ...

  9. 第二节 双向链表的GO语言实现

    一.什么是双向链表 和单链表比较,双向链表的元素不但知道自己的下线,还知道自己的上线(越来越像传销组织了).小煤车开起来,图里面可以看出,每个车厢除了一个指向后面车厢的箭头外,还有一个指向前面车厢的箭 ...

  10. DSP5509的GPIO学习-第5篇

    1. 使用CCS V6.1版本,目前已经不局限于仅仅把实验搞清楚了,要深入去探究内部的原理,本章看下GPIO实验 2. 在CCS启动的时候,提示,这个问题是什么,XDAIS是什么?XDAIS (eXp ...