专栏首页地方网络工作室的专栏打造前端MAC工作站(十)效率工具 Browsersync ,文件保存浏览器自动刷新

打造前端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 条评论
登录 后参与评论

相关文章

  • Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios

    Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios 2017年8月补充 2016年,我写了一系列的 V...

    FungLeo
  • 特殊配列 GH60 键盘设计组装笔记

    上次用 XD60 制作了一块特殊配列的键盘。虽然用着非常满意,但是终究不是用 GH60 的标准制作的。因此,心里一直很痒痒,希望用 GH60 再做一块键盘。

    FungLeo
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器 前情回顾 通过前面系统的学...

    FungLeo
  • 一、二、三,轻量限定套餐

    1 ? 推荐阅读 访谈|揭秘轻量应用服务器Lighthouse的故事 干货|一图读懂轻量应用服务器Lighthouse 5分钟玩转Lighthouse|搭建...

    腾讯云计算产品团队
  • GeekPwn云安全挑战赛赛前大揭秘!

    作为此次大赛的前一站,一场精彩的赛前对话将通过线上直播形式和大家见面。相比去年,今年的比赛无论从赛制、赛程还是奖励等方面,都会有所不同。今年比赛有哪些看点,赛制...

    腾讯安全
  • 前端构建系统-《node.js实战》

    node有npm,npm能运行脚本。在package.json文件中,scripts 属性可以指定npm 的命令:

    用户3258338
  • Tensorflow基础

    Tensorflow是Google推出的机器学习开源神器,对Python有着良好的语言支持,支持CPU,GPU和Google TPU等硬件,并且已经拥有了各种各...

    oYabea
  • 机器学习免费跑分神器:集成各大数据集,连接GitHub就能用,还能验证论文结果

    现在,Papers with Code (那个以论文搜代码的神器) 团队,推出了自动跑分服务,名叫sotabench,以跑遍所有开源模型为己任。

    量子位
  • Redis简介与安装

    Redis简介 大名鼎鼎的Redis是NoSQL(非关系型数据库)中的一员,以高性能出名,支持复制,持久化.客户端分片等特性.不使用表,数据库也不会定义或者强制...

    GavinZhou
  • Nuxt.js 开发SSR(服务端渲染)Web应用

    Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计,而 VuePress 更适合构建以内容为中心的静态站点,如技术文档,博客等。

    我是一条小青蛇

扫码关注云+社区

领取腾讯云代金券