browsersync能让浏览器自动刷新、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。
使用教程
- 安装BrowserSync
全局安装(前提安装Node.js)
npm install -g browser-sync
当然您也可以结合gulpjs或gruntjs构建工具来使用,在您需要构建的项目里运行下面的命令
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"
网友评论