利用Browsersync实现快速测试。（修改文件自动刷新，避免手动f5）

最新推荐文章于 2018-07-29 08:56:50 发布
最新推荐文章于 2018-07-29 08:56:50 发布
阅读量717 收藏
点赞数
分类专栏： NodeJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wocaonima332/article/details/53374917
版权

Browsersync基于node。

1. 安装  npm install -g browser-sync

2.命令行输入 browser-sync start --server --files "css/*.css,html/*.html"。

即可实现，修改css下面的任何css文件，html下面的任何html文件会自动刷新。

这样会创建一个http服务器，端口为3000。

 

3.如果本来已经有了http服务器，可以使用代理

browser-sync start --proxy "主机名" --files "css/*.css"

 

注意：如果原来已经使用了nginx代理服务，就无法使用browersync了，（只是用nginx，不使用他的代理功能就可以）

夜色镇议员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自动刷新从BrowserSync开始
10-16
Browsersync是一个为网页开发者设计的工具，它的核心功能是在开发者进行网页开发时，能够在保存文件后，实时地在所有连接的设备上自动刷新浏览器页面，从而展示最新代码的效果。这在前端开发中非常实用，尤其是涉及...
Express结合Webpack的全栈自动刷新
12-09
`BrowserSync` 是一种解决这个问题的工具，它能够实现在保存文件后自动刷新浏览器。然而，随着 `Webpack` 的流行，前端资源的管理和编译变得更加复杂。`Webpack` 需要在每次保存文件后对静态资源进行编译，因此自动...
Browsersync 浏览器自动刷新
weixin_30617695的博客
01-22 120
Browsersync是一个很好用的工具，它可以实时监测文件的变动然后自动刷新浏览器，不用每次去点刷新或F5，特别在调试样式时非常有用。 browsersync中文网http://www.browsersync.cn/ 安装 首先安装node.js（直接下载后安装就行,http://nodejs.cn/download/） > 打开命令行（win+r 然后输入cmd打开命令行）&...
通过Gulp使用Browsersync实现浏览器实时响应文件更改
weixin_30652491的博客
08-17 140
Gulp是什么鬼 Browsersync又是什么鬼 如何安装使用Browsersync 安装 使用 效果图 参考 Gulp是什么鬼 Gulp是一种基于node.js的构建工具，有关构建工具的概念请移步什么是构建工具 Gulp的安装及基本使用，可参考一点| gulp详细入门教程,写得十分6，通俗易懂 Browsersync又是什么鬼 Browse...
BrowserSync的大坑，监听不起作用解决办法，附gulp浏览器同步自动刷新部署方法
一生为追梦的博客
11-16 7311
能将本地服务器代理到localhost:3000/localhsot:3001的操作： 按照官网来操作的代码是不起作用的： browser-sync start --proxy "127.0.0.1:8081" "E:/newcrm/trunk/4_Tools/crm/**/*.html,E:/newcrm/trunk/4_Tools/crm/**/*.js" 查完后发现改成下面这样就起
1. 本地搭服务测试（browsersync）2. vs-code 本地启服务 3. ngnix 与后台联调
萝卜芹菜芽
10-26 886
browsersync: 监听动态改变及时刷新。 官网 npm 安装： http://www.browsersync.cn/ 比如， 在当前目录运行：（默认 3000 端口） browser-sync save --server --file "css/*.css vs-code 本地启服务 插件 Live server ngnix : 可映射到后台 ip , 实现联调（...
react+webapck+redux+browser-sync+nginx开发总结
sma2mmm的博客
02-28 207
1 使用browserHistory 打包后页面刷新出现404:解决方法：nginx:server { ... location / {  try_files $uri /index.html }}
Browsersync浏览器同步测试工具-浏览器兼容性测试工具.pdf
09-13
Browsersync是一款功能强大的浏览器同步测试工具，主要用于实时监控代码文件的修改，自动刷新页面，免去手动F5的麻烦步骤。下面是对Browsersync浏览器同步测试工具的详细介绍。 什么是Browsersync？ Browsersync是...
Browsersync浏览器同步测试工具-浏览器兼容性测试工具.docx
09-13
当开发者在编辑器中保存更改后，Browsersync能立即识别到文件的变化，并自动在所有连接的浏览器中刷新页面，确保开发者能在不同环境下快速查看更新效果。这不仅适用于桌面端，还支持通过创建临时服务器，在局域网内...
gulp压缩文件自动刷新
08-10
总的来说，通过使用gulp，我们可以方便地实现JavaScript文件的压缩和自动刷新功能，这对于快速迭代的前端开发来说尤其重要。结合其他插件，gulp还可以扩展到更多的自动化任务，如CSS预处理、HTML模板处理等，使得...
修改文件后浏览器自动刷新解决方案
Code-lover's Learning Notes
10-21 9750
为什么要找这样的一个方法？ 工作场景中发现的需求，都要找办法去解决。 我们在双屏开发的时候，经常是在Mac屏幕上写代码，然后在扩展屏幕上放着浏览器。 一般写几行代码，就会去刷新一下浏览器，看看代码运行是否正常。可是把鼠标从两个屏幕滑来滑去，很麻烦，特别是在写CSS的时候，如果能跨屏刷新就很棒了。现有编程工具的自动刷新解决方案其实有很多工具可以做到文件一改变，浏览器自动刷新，其实这样体验也是最好
browser-sync自动刷新-前端利器
jrn1012的专栏
10-08 4941
browser-sync自动刷新链接:这是一个神器，相比LiveRoad使用比较简单，建议做前端开发的同学，不要犹豫和观察，赶紧装上释放你的F5吧。以下来自己browser-sync中文网的介绍和使用方法。省时的浏览器同步测试工具Browsersync能让浏览器实时、快速
Browsersync网页自动刷新，实时监看效果
加载中的博客
06-08 723
   在没使用webpack之前，我们在做普通网页往往面临着修改后还需刷新页面的困扰，推荐使用Browsersync，直接在安装过node的电脑上npm install -g browser-sync安装完之后再项目路径下进入控制台，使用browser-sync start --server --files "**/*.css, *.html, **/*.js" ...
webbrowser F5刷新
MOKA
11-11 4240
C# webbrowser实现真正意义上的F5刷新 关于webbrowser的刷新在C#中有提供方便的方法： webbrowser.refresh(); 但是有时候会发现，不给力啊 那怎么办？ 还有一招： webBrowser1.Document.ExecCommand("Refresh",false,null);//真正意义上的F5刷新
F5刷新和Ctrl+F5强制刷新
Kevin yan的专栏
11-18 5768
IE里F5和Ctrl+F5区别一个是刷新，一个是强制刷新 按F5有时候一些内容是不会被更新的，而CTRL+F5则所有内容都会被更新. 具体区别是：F5通常只是刷新本地缓存；Ctrl+F5可以把INTERNET临时文件夹的文件删除再重新从服务器下载，也就是彻底刷新页面了
用browser-sync进行实时刷新
attwice的专栏
12-23 4764
1.添加gulp、gulp-sass、browser-sync组件npm install --save-dev gulp gulp-sass browser-sync会在package.json中添加如下内容: "devDependencies": { "browser-sync": "^2.10.1", "gulp": "^3.9.0", "gulp-sass": "^2
web开发中谷歌/火狐浏览器无法及时更新html/js修改内容？
AlwaySimple的博客
07-29 2873
web开发中谷歌/火狐浏览器无法及时更新html/js修改内容？ 1.问题描述 在web开发过程中，有时我们修改了HTML内容后，使用f5或者重新加载网页的方式在浏览器中查看修改后的网页最新内容时，有时会出现无法刷新的情况。 2.解决办法 (1）谷歌浏览器 第一步：打开网页后，按f12，会出现开发者调试窗口。 第二步：点击Network，勾选Disable cache。 勾选后，以后...
browser-sync搭建实时刷新页面效果
05-24 1157
使用工具：node+gulp+browser-sync 首先安装node 然后命令行安装gulp和browser-sync插件    npm install gulp -g npm install browser-sync -g browser-sync的使用方式，一般我用： 直接在项目文件夹根目录下，shift+鼠标右键，选择在此处打开命令行窗口， 输入   bro
Angular中，数据更改自动加载页面
Jack Tian的博客
12-12 1760
在angularjs中，检查绑定的数据有没有发生变化，页面动态修改数据，angularjs不去更新视图的问题 可以使用angularjs提供的$scope.$apply方法 $scope.name = "张三";setTimeout(function(){ $scope.$apply(function(){ $scope.name = "李四"; }); },1
idea实现修改代码后自动刷新
最新发布
05-28
您可以使用一些工具来实现修改代码后自动刷新的功能。其中比较常用的工具是： 1. BrowserSync：BrowserSync是一个强大的工具，它可以监视文件的变化并在浏览器中自动刷新页面。您可以使用它来监视HTML、CSS和JavaScript文件的变化，并在浏览器中自动更新页面。要使用BrowserSync，您需要全局安装它，然后在项目中运行它。您可以通过命令行输入“browser-sync start”来启动BrowserSync。 2. LiveReload：LiveReload是另一个流行的工具，它可以监视文件的变化并在浏览器中自动刷新页面。它支持HTML、CSS、JavaScript和图像文件的监视。您可以通过命令行输入“livereload”来启动LiveReload。 3. Webpack Dev Server：如果您使用Webpack构建您的项目，那么Webpack Dev Server可以帮助您实现修改代码后自动刷新的功能。Webpack Dev Server可以监视文件的变化，并在浏览器中自动刷新页面。您可以通过命令行输入“webpack-dev-server”来启动Webpack Dev Server。 这些工具都可以帮助您实现修改代码后自动刷新的功能。您可以选择其中一个来使用，具体选择哪一个取决于您的项目需求和个人喜好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值