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. 【leetcode】390. Elimination Game

    题目如下: 解题思路:对于这种数字类型的题目,数字一般都会有内在的规律.不管怎么操作了多少次,本题的数组一直是一个等差数列.从[1 2 3 4 5 6 7 8 9] -> [2 4 6 8] - ...

  2. android 7.0适配（总结）

    file_paths.xml <?xml version="1.0" encoding="utf-8"?><paths xmlns:andro ...

  3. 一、Nginx常见问题

    1.相同server_name多个虚拟主机优先级访问 最先读取哪个配置文件,就访问那个的网页 2.location匹配优先级 相同location,会被后面的覆盖 匹配优先级更高的,找后面的 =    ...

  4. #1126-JSP服务器响应

    JSP服务器响应 Response响应对象主要将JSP容器处理后的结果传回到客户端.可以通过response变量设置HTTP的状态和向客户端发送数据,如Cookie.HTTP文件头信息等. 一个典型的 ...

  5. Java关于Files. walkFileTree()

    1.使用Files. walkFileTree()找出指定文件夹下所有扩展名为.txt和.java的文件. package text_001; import java.io.IOException; ...

  6. 使用xshell远程连接Linux

    Linux系统对于程序员来说并不陌生,对IT技术员来说是一个很好的开发平台,因此掌握Linux系统的操作对于一个程序员来说非常有用.而对于习惯使用windows的人来说直接在Linux系统下进行操作感 ...

  7. 微信小程序 input 组件

    输入框:该组件是原生组件,使用的时候要注意相关的设置 属性: value:类型 字符串 输入框的初始内容 type:类型 字符串 input类型 属性值:text 文本输入键盘 number 数字输入 ...

  8. benchmarks

    系统性能测试 stream SPARK 测试 streaming benchmark https://github.com/yahoo/streaming-benchmarks

  9. leetcode-mid-array-49 Group Anagrams

    mycode  95.35% 思路:构建字典 class Solution(object): def groupAnagrams(self, strs): """ :ty ...

  10. Linux中退出循环命令

    [root@a ~]#cat break.sh #!/bin/bash while : #其中“:”表示while循环的条件永远为真的意思 do read -p "Enter a numbe ...