前端写代码自动刷新神器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 ...
随机推荐
- 【leetcode】390. Elimination Game
题目如下: 解题思路:对于这种数字类型的题目,数字一般都会有内在的规律.不管怎么操作了多少次,本题的数组一直是一个等差数列.从[1 2 3 4 5 6 7 8 9] -> [2 4 6 8] - ...
- android 7.0适配(总结)
file_paths.xml <?xml version="1.0" encoding="utf-8"?><paths xmlns:andro ...
- 一、Nginx常见问题
1.相同server_name多个虚拟主机优先级访问 最先读取哪个配置文件,就访问那个的网页 2.location匹配优先级 相同location,会被后面的覆盖 匹配优先级更高的,找后面的 = ...
- #1126-JSP服务器响应
JSP服务器响应 Response响应对象主要将JSP容器处理后的结果传回到客户端.可以通过response变量设置HTTP的状态和向客户端发送数据,如Cookie.HTTP文件头信息等. 一个典型的 ...
- Java关于Files. walkFileTree()
1.使用Files. walkFileTree()找出指定文件夹下所有扩展名为.txt和.java的文件. package text_001; import java.io.IOException; ...
- 使用xshell远程连接Linux
Linux系统对于程序员来说并不陌生,对IT技术员来说是一个很好的开发平台,因此掌握Linux系统的操作对于一个程序员来说非常有用.而对于习惯使用windows的人来说直接在Linux系统下进行操作感 ...
- 微信小程序 input 组件
输入框:该组件是原生组件,使用的时候要注意相关的设置 属性: value:类型 字符串 输入框的初始内容 type:类型 字符串 input类型 属性值:text 文本输入键盘 number 数字输入 ...
- benchmarks
系统性能测试 stream SPARK 测试 streaming benchmark https://github.com/yahoo/streaming-benchmarks
- leetcode-mid-array-49 Group Anagrams
mycode 95.35% 思路:构建字典 class Solution(object): def groupAnagrams(self, strs): """ :ty ...
- Linux中退出循环命令
[root@a ~]#cat break.sh #!/bin/bash while : #其中“:”表示while循环的条件永远为真的意思 do read -p "Enter a numbe ...