开始安装:
1 | npm install -g browser-sync |
当然您也可以结合gulpjs或gruntjs构建工具来使用,在您需要构建的项目里运行下面的命令:
1 | npm install --save-dev browser-sync |
静态网站
如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
1 | // --files 路径是相对于运行该命令的项目(目录) |
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html文件
1 | // --files 路径是相对于运行该命令的项目(目录) |
1 | // 监听css文件 |
1 | browser-sync start --server --files "**/*" |
动态网站
如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
1 | // 主机名可以是ip或域名 |
在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
1 | browser-sync start --proxy "Browsersync.cn" --files "css/* .css" |
1 | browser-sync start --proxy "Browsersync.cn" --files "**/*" |
一点建议,其实也是gulp+browser-sync方法的介绍,算是本文核心(我现在用的方法)
1 | var gulp = require('gulp'); |