安装分两部分 浏览器和编辑器同时安装插件liveStyle
优点有以下几项：
缺点也很明显
- liveStyle 是针对样式的实时工具,包括css、less、sass，不能修改HTML和js文件。
- 目前只适用于Google Chrome和Sublime Text，如果你使用的是其他编辑软件的话就不一定那么好用了
二、liveReload http://livereload.com/
- liveReload 工作的本质： 是监控所有文件修改，文件修改后刷新浏览器，相当于帮你按了 F5
- 安装分两部分 浏览器安装 liveReload 和 本地安装 npm install -g livereload
- 启动 cd到项目文件夹下，执行 livereload
- 优点 ：
- 相比较liveStyle 而言，liveReload 功能更丰富，不仅包括css，less，sass，像img，html，js等格式的文件同样也适用
- 编辑器方面的选择更加多样
- 支持gulp，grunt等工具的使用
- 缺点：
- 相比较liveStyle 而言liveReload 修改是单向的, 也就是浏览器 -> 编辑器 这一功能是没有的 (当然这是相对来说)
- 只能在单一页面起作用，如果我开两到3个不同分辨率的页面做响应式或手机端，liveReload 就不美了。
三、Broswer-Sync https://browsersync.io/
- 安装npm install -g browser-sync
- 启动
- 静态网站 - 如果您只使用.html文件，则需要使用服务器模式。browser-sync start --server --files "css/*.css"
- 动态网站 - 如果您已经在运行PHP或类似的本地服务器则需要使用代理模式。browser-sync start --proxy "myproject.dev" --files "css/*.css"
- 需要注意的是 对于指令对于命令中的 css/*.css 和 myproject.dev 要根据实际文件夹名称，文件路径进行调整
- 优点 :
- 相较于以上2种工具, Broswer-Sync 的应用范围更广,使用者更多, 这就意味着你所可能遇到的麻烦越少
- liveReload 是浏览器的 F5, 而Broswer-Sync 则是只针对修改的文件进行视图同步
- 无论你开多少页面，只要内容修改页面内容都是随着变化，响应式，手机端调试等都是极好的。
- 官方展示的优点如下
四、对比
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
