三种工具分别是
- livestyle(http://livestyle.io/)
需要:chrome livestyle插件 sublime 插件 - livereload(http://livereload.com/)
需要:浏览器插件livereload nodejs插件 npm install -g livereload - browsersync(http://www.browsersync.cn/#install)不需要安装插件
简介
- BrowserSync是一个同步多浏览器页面测试工具,在IDE里面修改完文件,页面就会同步刷新
- BrowserSync除了自动刷新,默认配置下,BrowserSync
会在打开你当前网页的所有浏览器中同步滚动条位置,表单行为和点击事件 - BrowserSync启动的时候会自动启动自带的静态的服务器,通过这个服务器来访问网页
- BrowserSync
不需要安装任何的浏览器插件,就可以处理项目文件,不像livereload
,必须要安装浏览器插件
基本原理
当网页已连接到BrowserSync的时候,我们可以查看一下源码,会发现它们都被添加了与BrowserSync有关的一段<script>代码,就像liveReload浏览器插件做的那样。这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接,一旦有监听的文件发生变化,BrowserSync会通知浏览器。
如果发生变化的文件是css,BrowserSync不会刷新整页,而是直接重新请求这个css文件,并更新到当前页中。
browsersync的使用:
和gulp结合
参考:gulp结合使用
高级用法
在控制台里尝试输入:
$ browser-sync init
回车,然后你会发现,当前目录多了一个bs-config.js文件,这个是BrowserSync的配置文件。有关BrowserSync
的所有运行配置都在这个里面,我们可以参考官方给出的文档进行修改,然后以这个配置文件来运行BrowserSync:
$ browser-sync start --config bs-config .js
三种方案对比: