BrowserSync的安装和使用
BrowserSync真是前端必备神器,浏览器同步工具。简单来说就是当你保存文件的同时浏览器自动刷新网页,省去了手动的环节,大大的节省了开发时间,这个工具是基于nodejs的,可以通过npm安装,不在啰嗦
npm install -g browser-sync
然后,就可以开始使用了。打开控制台进入项目所在的目录,然后输入像这样的命令:
browser-sync start --server --files "css/*.css"
这个命令用于纯静态站点,也就是仅一些.html文件的情况。后面的--files "css/*.css",是指监听css目录中的后缀名为.css的文件。请注意这个命令里的start --server,这其实是BrowserSync自己启动了一个小型服务器。
如果是动态站点,则使用代理模式。例如PHP站点,已经建立了一个本地服务器如http://localhost:8080,此时会是这样的命令:
browser-sync start --proxy "localhost:8080" --files "css/*.css"
BrowserSync会提供一个新地址(如未被占用的话,http://localhost:3000)用于访问。
如果简单只是想要监听整个项目,可以写成这样:
browser-sync start --server --files "**"
在控制台里尝试只输入:
browser-sync
你会看到BrowserSync完整的控制台命令指南。其中可以看到有这个命令:
browser-sync init
运行它,将在当前目录生成一个配置文件bs-config.js。
参照官方文档修改这个文件,然后运行
browser-sync start --config bs-config .js
就将以bs-config.js的完整配置信息运行BrowserSync
下面是我运行时临时截了一张图
3001端口是后台地址,里面可自己开启和关闭一些功能,想要终止当前目录,用ctrl+c命令打断即可,清空用cls命令
另外也可以通过gulp使用这个工具,Gulp是现在流行的自动化工具,但BrowserSync并没有Gulp插件版,因为并不需要。
BrowserSync有自己独立的API,将它注册为gulp的一个task即可,送上官方的传送门
BrowserSync的安装和使用的更多相关文章
- browsersync的安装与基本使用
browser-sync启动命令 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 官网文档:http://www.brows ...
- 使用gulp和browser-sync实现浏览器自动刷新
安装gulp (前提是已经安装了node) 全局安装: npm install -g gulp 本项目安装: npm install gulp --save-dev 安装browser-sync 全局 ...
- 网页真机调试之Browsersync简介
以前的调试方式 修改完项目文件(html.js.css等)后保存,在浏览器刷新页面查看修改后的效果 本地开启一个 tomcat 服务,修改文件后保存刷新页面,移动端或其他 pc 则需要输入 ip + ...
- 使用browserSync自动刷新
本篇主要是以 http://www.imooc.com/article/14759 为参考来写的: 已经整理到github上:https://github.com/Macaulish/gulp-Bro ...
- browser-sync 文件监听失败的解决方案
问题 为了方便实时预览前端开发过程中修改源码后的页面,我在全球最大的同性交友网Github中找到了一个非常实用的工具,browser-sync. 安装使用方式请自行到官网https://browser ...
- BrowserSync,自动刷新,解放F5,去掉更新提示
BrowserSync虽然这个技术不算新,但是依然有用.略微介绍下 没有安装node,先安装node,这里不再做介绍 安装 npm install -g browser-sync 全局安装,方便在任 ...
- 由VMnet引起的browser-sync故障解决方案
(2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月11日) 今天晚上,前端组的小伙伴问我说能不能帮忙看看他的电脑为什么在安装了browser-sync插件以后, ...
- Browsersync 浏览器自动刷新
Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用. browsersync中文网 http://www.bro ...
- gulp常用插件之browser-sync使用
更多gulp常用插件使用请访问:gulp常用插件汇总 browser-sync这是一个可以在多端(pc.移动.平板)实时监测文件修改,自动刷新浏览器的工具.其实这并不是转给gulp使用的,在其它构建工 ...
随机推荐
- 部分linux系统命令(shell 命令)和hadoop命令
linux系统命令(shell 命令): ls : 只列出文件/目录 ls -l : 会显示文件的详情,如大小等 ls -lh : 会显示文件的详情,但大小以k或者M为单位 ls ../ : ...
- .NET Core跨平台:使用.NET Core开发一个初心源商城总括
1..NET Core基本介绍 a 作为一个.NET的开发者,在以前的开发中,我们开发的项目基本都是部署在windows服务器上,但是在windows服务器上的话某些比较流行的解决访问量的方案基本都是 ...
- C语言程序的三种基本结构
1.程序结构:在C语言程序中,一共有三种程序结构:顺序结构.选择结构(分支结构).循环结构: 顺序结构:从头到尾一句接着一句的执行下来,直到执行完最后一句: 选择结构:到某个节点后,会根据一次判断的结 ...
- spring mvc之@ModelAttribute注解
1.@ModelAttribute注释void返回值的方法 @Controller public class HelloModelController { @ModelAttribute public ...
- 关于NoClassDefFoundError和ClassNotFoundException异常
java.lang.NoClassDefFoundError 和 java.lang.ClassNotFoundException 都是 Java 语言定义的标准异常.从异常类的名称看似乎都跟类的定义 ...
- 浅解.Net分布式锁的实现
序言 我晚上有在公司多呆会儿的习惯,所以很多晚上我都是最后一个离开公司的.当然也有一些同事,跟我一样喜欢在公司多搞会儿.这篇文章就要从,去年年末一个多搞会的晚上说起,那是一个夜黑风高的晚上,公司应该没 ...
- Linux JDK+TOMCAT+MYSQL+redis 安装日志
检查是否安装iptables #先检查是否安装了iptablesservice iptables status#安装iptablesyum install -y iptables#升级iptables ...
- angular router ui bug !
https://github.com/angular-ui/ui-router/issues/600 https://github.com/angular-ui/ui-router/issues/22 ...
- 第25篇 jQuer快速学习(上)---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- 2017 3-4/5 两天的学习的REVIEW
明天就要去面试啦,去感受一下,估计又是一顿虐,蓝瘦-- 3月4日:计算机安全基础技术与原理方面的学习 密码体制(密码)由五个部分组成: 消息空间(m),密文空间(c),密钥空间(k),加密算法(E), ...