BrowserSync(前端利器—保存代码后,自动刷新浏览器)
摘要
Browsersync能让浏览器实时、快速响应您的文件更改(HTML、JavaScript、CSS、Sass、Less、PHP、Python等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。1
安装环境
- Windows系统
下载与安装
下载安装 Node.js
因为BrowserSync是基于Node.js的, 是一个Node模块,所以使用之前需要安装Node.js
点击下载 Node.js
安装Node.js就像安装普通软件一样,此处省略安装流程
检查Node.js是否安装成功
(Windows使用CMD)输入命令行: node -v
[用于查看Node.js是否安装成功,显示Node.js版本号,则表示安装成功。如图下所示:
$ node -v
v10.16.0
安装 BrowserSync
从Node.js的包管理(NPM[全称:Node.js Package Manager])库中安装BrowserSync
打开终端,输入以下命令行
npm install -g browser-sync
常见问题
错误:
....Unsupported platform for fsevents......
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN glodon-satic-model@1.0.0 No repository field.
原因:
fsevent是在macOS下的依赖包,因为当前系统是Windows,因此只报warning信息2
解决方法:
Windows系统忽视该错误,即可。
参考
BrowserSync(前端利器—保存代码后,自动刷新浏览器)的更多相关文章
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
- vscode保存代码,自动按照eslint规范格式化代码设置
# vscode保存代码,自动按照eslint规范格式化代码设置 编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目, ...
- 黄聪:PHP如何实现延迟一定时间后自动刷新当前页面、自动跳转header("refresh:1;url={$url}");
//1秒后自动跳转 header("refresh:1;url={$url}"); exit; //1秒后自动刷新当前页面header("refresh:1;" ...
- 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器
http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...
- webpack热加载:修改文件自动刷新浏览器并更新
概述 之前用react脚手架,觉得那种修改了能立即自动刷新浏览器并更新的功能实在非常人性化,所以想在开发其它项目的时候能用上.于是查了一些资料记录在此,供以后开发时参考,相信对其他人也有用. 其实代码 ...
- django 调试 监控文件变化 自动刷新浏览器
问题描述:修改html js py等文件后,自动刷新浏览器,解放F5,提高效率 解决办法:使用gulp,使用bowerSync 关于gulp,可以查看系列教程 关于bowerSync,查看官网 关于结 ...
- 更为简单的Ctrl+S自动刷新浏览器工具-LinrF5
一款自动刷新浏览器的小工具,它通过监听用户的按键,如果在键盘按下 Ctrl+S ,则自动刷新浏览器,操作十分简单,前端开发必备神器,快速提升工作效率,支持IE.火狐以及最新版的chrome33.之前我 ...
- 哇 真的是一个好插件!!!Sublime Text编辑文件后快速刷新浏览器
http://9iphp.com/web/html/sublime-text-refresh-browser.html这篇博文咯 来源:[Tips]Sublime Text编辑文件后快速刷新浏览器 - ...
- autoOpenBrowser: true, 运行npm后自动打开浏览器
autoOpenBrowser: true, 运行npm后自动打开浏览器
随机推荐
- [LC] 100. Same Tree
Given two binary trees, write a function to check if they are the same or not. Two binary trees are ...
- 吴裕雄--天生自然python学习笔记:Python CGI编程
什么是CGI CGI 目前由NCSA维护,NCSA定义CGI如下: CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户 ...
- python列表推导式(扫盲)
1) 简单了解: 所谓的列表推导式,就是指的轻量级循环创建列表. 格式: 列表推导式的常见形式: my_list = [ item for item in iterable] my_list: 列表名 ...
- docker 使用:镜像和容器
docker 镜像 docker image是一个极度精简版的Linux程序运行环境,官网的java镜像包括的东西更少,除非是镜像叠加方式的如centos+java7,需要定制化build的一个安装包 ...
- <USACO09DEC>过路费Cow Toll Pathsの思路
啊好气 在洛谷上A了之后 隔壁jzoj总wa 迷茫了很久.发现那题要文件输入输出 生气 肥肠不爽 Description 跟所有人一样,农夫约翰以着宁教我负天下牛,休叫天下牛负我的伟大精神,日日夜夜苦 ...
- Tensorflow 错误集锦
文章目录 参考文献 本文记录笔者在Tensorflow使用上的一些错误的集锦,方便后来人迅速查阅解决问题. 我是留白. 我是留白. CreateSession still waiting for re ...
- react和vue
react整体的思路就是函数式,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合redux-form,而vue是基于可变数据的,支持双向绑定.react组件的扩展一般是通 ...
- Ubuntu 16.04 PXE+kickstart部署系统
#PXE+TFTP+Kickstart 自动部署服务器系统系统Ubuntu16.04apt-get install isc-dhcp-servervim /etc/default/isc-dhcp-s ...
- 量化投资学习笔记29——《Python机器学习应用》课程笔记03
聚类的实际应用,图像分割. 利用图像的特征将图像分割为多个不相重叠的区域. 常用的方法有阈值分割,边缘分割,直方图法,特定理论(基于聚类,小波分析等). 实例:利用k-means聚类算法对图像像素点颜 ...
- CSS——NO.6(盒模型)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...