打造前端MAC工作站(十)效率工具 Browsersync ,文件保存浏览器自动刷新

打造前端MAC工作站(十)效率工具 Browsersync ,文件保存浏览器自动刷新

前言

当我们在开发vue+webpack的项目时候,发现有一点非常好,就是当我们的文件保存的时候,就立即自动刷新了。这样可以大幅提高我们开发的效率。

问题是,我们并不会所有的项目都是基于webpack构架的呀,那么我们还能不能再我就想写一个简单的网页文件的时候,也能有这个功能呢?又或者在我们开发基于apache服务端的页面的时候,也能自动刷新呢?

还真有这样的工具,名字就是 Browsersync

Browsersync 的安装

安装非常简单,这是一款基于node.js的工具。直接执行下面的命令即可

npm install -g browser-sync

前提是你已经安装了node.js了哦!

Browsersync 的使用

静态页面的使用

// 跳转到你的网页文件目录
cd ~/youSiteName
// 执行下面的命令
browser-sync start --server --files "css/*.css"

如上命令,就可以监控你的网页文件下面的css文件夹中的任何css文件。当css文件发生修改并保存的时候,浏览器就会自动刷新。

当然,你可能还要监控其他文件,比如html文件

browser-sync start --server --files "css/*.css, *.html"

就可以监控css目录下面的样式文件和根目录下面的html文件了。

你或者有其他要求,就是你的htmlcss文件比较松散,那么下面的命令应该合适于你

browser-sync start --server --files "**/*.css, **/*.html"

上面的命令就可以监控你的网页文件夹下面的所有的样式文件和网页文件了。如果还有其他的类型的文件,可以直接修改参数哦!

动态网站的使用

如果是动态网站,比如你本地用xampp跑了一个php+mysqlfengcms或者dedecms的程序,那么应该怎么使用呢?也是很简单的。

那就是用browser-sync做一个反向代理即可。

命令如下:

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

主机名就是你本地服务器中动态网页绑定的网址,比如www.cms.com。然后你要监控所有的样式文件和网页文件,则这条命令就是

browser-sync start --proxy "www.cms.com" --files "**/*.css, **/*.html"

browsersync 附加资料

视频使用教程 http://www.browsersync.cn/example/video/browsersync1.mp4

中文官方网站 http://www.browsersync.cn/

英文官方网站 https://browsersync.io/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Laoqi's Linux运维专列

初识Python并安装版本的Python

25350
来自专栏Spring相关

动态加载布局的技巧

1.在res下面新建一个layout-large的文件夹,下面建一个activity_main.xml:

12340
来自专栏MixLab科技+设计实验室

微信公众号文章爬取 | 数据爬取及可视化系列

简单来说,整个技术路线是这样的: 用电脑架设一个代理服务器, 然后手机设置wifi代理, 打开手机微信, 浏览微信文章的历史页面, 在电脑端截取获取的数据,再做...

549100
来自专栏我爱编程

去掉WordPress功能中的文章,评论,org链接

打开网站的根目录,找到 wp-includes 文件夹,在此目录下找到 widgets 文件夹,这个目录下有个 class-wp-widget-meta.php...

16340
来自专栏程序人生 阅读快乐

深入理解Android:WebKit卷(移动开发)

全书一共11章:第1章介绍了Android源代码阅读与编译环境的搭建;第2章介绍了浏览器的通用工作原理以及WebKit的架构设计;第3章深入解析了WTF的实现原...

23010
来自专栏Youngxj

emlog为友链加上ico图标

24370
来自专栏Youngxj

emlog转WordPress神器

23240
来自专栏每日一篇技术文章

微信小程序_02创建一个简单的工程

这个时候运行一些 应该会报错,因为在myPage.js 里面没有写任何东西,程序找不到执行的函数

17720
来自专栏拂晓风起

让tomcat跑起php(caucho quercus简单用法,tomcat运行php)

13030
来自专栏ytkah

修改dedecms面包屑导航的首页链接关键字

  dedecms面包屑导航默认是"主页>分类>二级分类>",我们知道链接的锚文字对排名有一定影响,这时可以考虑将“主页”改成具体的关键字,那么如何修改dede...

41150

扫码关注云+社区

领取腾讯云代金券