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的更多相关文章

  1. 手写代码自动实现自动布局,即Auto Layout的使用

    手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下. 这里要注意几点: 对子视图的约束,若是基于父视图,要通过父视图去添加约束. 对子视图进行自动布局调整,首先对UIVi ...

  2. 前端浏览器自动刷新神器:Browsersync

    [安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...

  3. browsersync 浏览器自动刷新神器

    官网:http://www.browsersync.cn/ 基于node,具体安装方法和使用方法参见官网,可以结合gulp等构建工具来用,也可以单独使用.不错~

  4. nodejs 更新代码自动刷新页面

    安装第三方工具: nodemon npm install --global nodemon 安装完毕后使用: 之前使用: node xxx.js 改成 nodemon xxx.js 只要通过nodem ...

  5. c# 前端写代码的情况

    <%for(int i=0;i<list_model.Count;i++) { %> <div style=" padding-left:35px;padding-r ...

  6. BrowserSync,调试利器--自动刷新(转

    ---恢复内容开始--- 请想象这样一个场面:你开着两个显示器,一边是IDE里的代码,另一边是浏览器里的你正在开发的应用.此时桌上还放着你的手机,手机里也是这个开发中的应用.然后,你新写了一小段代码, ...

  7. gulp+browserSync+nodemon 实现express 全端自动刷新的实践

    学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...

  8. node express4 + 前端自动刷新

    官网快速生成:http://www.expressjs.com.cn/starter/generator.html 1.安装  express 1.应用生成器工具 express-generator  ...

  9. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

随机推荐

  1. 在 Postman 中报错:Self-signed SSL certificates are being blocked 的分析与解决

    http://www.shuijingwanwq.com/2019/02/18/3171/

  2. Laya 首日红点逻辑

    Laya 首日红点逻辑 @author ixenos 2019-08-26 10:50:27 1.原理:显然,首日红点意味着包含进程销毁的情况,那么就要持久化存储信息,这里我们使用LocalStora ...

  3. webpack学习笔记二

    sourceMap 源代码与打包后的代码的映射关系.例如,在某个源文件中test.js里面有个错误,如果开启状态,那么打包后运行的报错信息就会说明是错误的具体位置,如果是关闭状态,报错后,提示的报错位 ...

  4. django model 操作总结

    使用场景 一对一:在某表中创建一行数据时,有一个单选的下拉框(下拉框中的内容被用过一次就消失了).//两个表的数据一一对应 例如:原有含10列数据的一张表保存相关信息,经过一段时间之后,10列无法满足 ...

  5. Android - Gradle架构中使用的“.so”库

    Android使用Gradle架构的Android应用,需要对.so库做特殊的处理,因为会找不到,就会导致编译正确,使用错误:常见的使用情况是根据不同的cpu,有不同的库,包括:armeabi,mip ...

  6. POJ 1384 Piggy-Bank (完全背包)

    Piggy-Bank 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/F Description Before ACM can d ...

  7. SpringMVC传参注解@RequestParam,@RequestBody,@ResponseBody,@ModelAttribute

    参考文档:https://blog.csdn.net/walkerjong/article/details/7946109 https://www.cnblogs.com/daimajun/p/715 ...

  8. 如何删除由Automater创建的服务

    想要设置两个实用的快捷设置(如何设置): 1.复制当前文件或者文件夹路径 2.在终端打开文件夹 然后想到可以用mac自带的自动操作这款软件,英文叫Automater.接着发现,显示路径栏后,直接就提供 ...

  9. 在sql中使用函数,遇到net.sf.jsqlparser.parser.ParseException异常

    异常详情如下 Caused by: net.sf.jsqlparser.parser.ParseException: Encountered " "->" &quo ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第2节 线程实现方式_1_并发与并行

    并发,相当于 一个人吃两个馒头,吃一口这个再吃一口另外一个.这里是cpu一会执行任务1,一会又执行任务2 并行,相当于两个人 吃两个馒头,各自吃各自的,这样速度就会快