browsersync 插件
自从发现了这个 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/ 进行访问。
相关网站与文档
browsersync 插件的更多相关文章
- gulp自动刷新插件
gulp自动刷新的插件很多,但是感觉最好用的还是 browser-sync 插件.如果不想用命令行,也可以使用 browser-sync界面工具 先安装 browser-sync 插件: npm in ...
- gulp + browserSync 一起提高前端开发效率吧!
前端开发的时候,每次修改代码后,要移动鼠标到浏览器选中再刷新查看效果,不知觉间我们的加班的时间又增加了0.5s, 真是罪孽!所以在使用gulp之后,就一直对能自动监听文件刷新页面的browserSyn ...
- webpack与browser-sync热更新原理深度讲解
本文首发于CSDN网站,下面的版本又经过进一步的修订.原文:webpack与browser-sync热更新原理深度讲解本文包含如下内容: webpack-hot-middleware EventSou ...
- 由VMnet引起的browser-sync故障解决方案
(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月11日) 今天晚上,前端组的小伙伴问我说能不能帮忙看看他的电脑为什么在安装了browser-sync插件以后, ...
- vue 项目使用局域网多端访问并实时自动更新(利用 browser-sync)
在写vue的项目中时,虽然vue会自动更新页面,但是切换页面切来切去也很麻烦,有时候我们还要在公司另一台电脑或者手机上调试,这时候利用browser-sync插件,无需改动vue的代码即可实现: 1. ...
- 前端工具之Gulp
Gulp是一款前端自动化的工具,如果能熟练使用Gulp来进行开发一定可以节省很多的时间,也可以快速的提高工作效率. 在使用Gulp之前就是要配置好Gulp安装的环境,这是我们能使用Gulp快速开发的第 ...
- 自动化前端构建工具--gulp
Gulp是一个基于任务的javascript工程命令行流式构建工具.为什么要用Gulp呢?前端开发进入到工程化阶段,我们需要压缩合并文件,加MD5戳:如果使用 CoffeeScript/ES6 去代替 ...
- Gulp 学习总结
Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS. http://nodejs.org/download/ 安装 ...
- [转发]Gulp开发教程(翻译)
Building With Gulp =================== 转载出处 原文地址 翻译出处 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的 ...
随机推荐
- php分页方法
$page_on=15;//定义每页显示数 $pageNum=$_GET['pageNum']; //当前页数 $result = mysql_query("SELECT * FROM ne ...
- react系列(二)高阶组件-HOC
高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...
- Docker 三种UI管理平台
docker集中化web管理平台 一.shipyard 1.启动docker,下载镜像 # systemctl restart docker # docker pull alpine # docker ...
- Spring知识点小结汇总
Spring部分 1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC Inverse of Control 反转控制的概念,就是将原本在程序中手动创建UserService对象的控 ...
- 原生js实现简单的随机点名系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 创建<Bean>sessionFactory错误, init方法调用失败;嵌套异常是org.hibernate.exception。
未知原因:在Maven中hibernate映射开启了自动更新表,出现此异常 org.springframework.beans.factory.BeanCreationException: Error ...
- mysql_config_editor的使用
从Mysql5.6.6 开始mysql_config_editor允许存储加密的身份验证文件.mylogin.cnf 如果不想每次登录服务器都输入数据库的密码可以使用该功能 mysql_config_ ...
- MYSQL 8.0.11 安装过程及 Navicat 链接时遇到的问题
参考博客:https://blog.csdn.net/WinstonLau/article/details/78666423 我的系统和软件版本是这样的: 系统环境:win7.64位 MySQL版本: ...
- jQuery基本toggle() toggleClass() 使用
今天来学习一下jQuery的基本函数的使用,很简单. 首先写一个button做控制按钮,然后写一个div用按钮控制idv做动画,从而测试JQuery的动画函数 <head> <met ...
- Redis(八):Redis的复制(Master/Slave)
Redis的复制(Master/Slave)目录导航: 是什么 能干嘛 怎么玩 复制原理 哨兵模式(sentinel) 复制的缺点 是什么 官网 行话:也就是我们所说的主从复制,主机数据更新后根据配置 ...