美文网首页
browsersync浏览器自动刷新工具

browsersync浏览器自动刷新工具

作者: 温故_知新 | 来源:发表于2019-03-10 22:36 被阅读0次

browsersync能让浏览器自动刷新、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。

使用教程

  1. 安装BrowserSync
    全局安装(前提安装Node.js)
    npm install -g browser-sync
    当然您也可以结合gulpjsgruntjs构建工具来使用,在您需要构建的项目里运行下面的命令
    npm install --save-dev browser-sync

2.启动BrowserSync

使用技巧

静态网站

利用browserSync开启一个小型的服务器,并提供一个url来查看你的网站。

//--files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"

// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"
动态网站

如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理来查看您的网站。

//主机名可以是ip或者域名
browser-sync start --proxy "主机名" "css/*.css"

//例如绑定Browsersync.cn来访问本地服务器
browser-sync start --proxy "Browsersync.cn" "css/*.css"

相关文章

网友评论

      本文标题:browsersync浏览器自动刷新工具

      本文链接:https://www.haomeiwen.com/subject/tqnqpqtx.html