前端写代码自动刷新神器Browsersync
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。
更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试
1 安装
已经按照cnpm库的可以使用命令行来按照
cnpm install -g browser-sync --save-dev
启动 BrowserSync
一个基本用途是,如果您只希望在对某个css
文件进行修改后会同步到浏览器里。
那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:
静态网站
如果您想要监听.css
文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html
文件
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"
动态网站
如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"
前端写代码自动刷新神器Browsersync的更多相关文章
- 手写代码自动实现自动布局,即Auto Layout的使用
手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下. 这里要注意几点: 对子视图的约束,若是基于父视图,要通过父视图去添加约束. 对子视图进行自动布局调整,首先对UIVi ...
- 前端浏览器自动刷新神器:Browsersync
[安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...
- browsersync 浏览器自动刷新神器
官网:http://www.browsersync.cn/ 基于node,具体安装方法和使用方法参见官网,可以结合gulp等构建工具来用,也可以单独使用.不错~
- nodejs 更新代码自动刷新页面
安装第三方工具: nodemon npm install --global nodemon 安装完毕后使用: 之前使用: node xxx.js 改成 nodemon xxx.js 只要通过nodem ...
- c# 前端写代码的情况
<%for(int i=0;i<list_model.Count;i++) { %> <div style=" padding-left:35px;padding-r ...
- BrowserSync,调试利器--自动刷新(转
---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码, ...
- gulp+browserSync+nodemon 实现express 全端自动刷新的实践
学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...
- node express4 + 前端自动刷新
官网快速生成:http://www.expressjs.com.cn/starter/generator.html 1.安装 express 1.应用生成器工具 express-generator ...
- gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全
gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...
随机推荐
- 在 Postman 中报错:Self-signed SSL certificates are being blocked 的分析与解决
http://www.shuijingwanwq.com/2019/02/18/3171/
- Laya 首日红点逻辑
Laya 首日红点逻辑 @author ixenos 2019-08-26 10:50:27 1.原理:显然,首日红点意味着包含进程销毁的情况,那么就要持久化存储信息,这里我们使用LocalStora ...
- webpack学习笔记二
sourceMap 源代码与打包后的代码的映射关系.例如,在某个源文件中test.js里面有个错误,如果开启状态,那么打包后运行的报错信息就会说明是错误的具体位置,如果是关闭状态,报错后,提示的报错位 ...
- django model 操作总结
使用场景 一对一:在某表中创建一行数据时,有一个单选的下拉框(下拉框中的内容被用过一次就消失了).//两个表的数据一一对应 例如:原有含10列数据的一张表保存相关信息,经过一段时间之后,10列无法满足 ...
- Android - Gradle架构中使用的“.so”库
Android使用Gradle架构的Android应用,需要对.so库做特殊的处理,因为会找不到,就会导致编译正确,使用错误:常见的使用情况是根据不同的cpu,有不同的库,包括:armeabi,mip ...
- POJ 1384 Piggy-Bank (完全背包)
Piggy-Bank 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/F Description Before ACM can d ...
- SpringMVC传参注解@RequestParam,@RequestBody,@ResponseBody,@ModelAttribute
参考文档:https://blog.csdn.net/walkerjong/article/details/7946109 https://www.cnblogs.com/daimajun/p/715 ...
- 如何删除由Automater创建的服务
想要设置两个实用的快捷设置(如何设置): 1.复制当前文件或者文件夹路径 2.在终端打开文件夹 然后想到可以用mac自带的自动操作这款软件,英文叫Automater.接着发现,显示路径栏后,直接就提供 ...
- 在sql中使用函数,遇到net.sf.jsqlparser.parser.ParseException异常
异常详情如下 Caused by: net.sf.jsqlparser.parser.ParseException: Encountered " "->" &quo ...
- 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第2节 线程实现方式_1_并发与并行
并发,相当于 一个人吃两个馒头,吃一口这个再吃一口另外一个.这里是cpu一会执行任务1,一会又执行任务2 并行,相当于两个人 吃两个馒头,各自吃各自的,这样速度就会快