前端实时可视化开发工具的使用

前端实时可视化开发工具：liveStyle、liveReload、Broswer-Sync。

一 、liveStyle http://livestyle.io/

• 安装分两部分
  浏览器和编辑器同时安装插件liveStyle
  

• 优点有以下几项：
  

• 缺点也很明显

1. liveStyle 是针对样式的实时工具,包括css、less、sass，不能修改HTML和js文件。
2. 目前只适用于Google Chrome和Sublime Text，如果你使用的是其他编辑软件的话就不一定那么好用了

二、liveReload http://livereload.com/

• liveReload 工作的本质： 是监控所有文件修改，文件修改后刷新浏览器，相当于帮你按了 F5
  

• 安装分两部分
  浏览器安装 liveReload 和 本地安装 npm install -g livereload

• 启动
  cd到项目文件夹下，执行 livereload

• 优点 ：

1. 相比较liveStyle 而言，liveReload 功能更丰富，不仅包括css，less，sass，像img，html，js等格式的文件同样也适用
2. 编辑器方面的选择更加多样
3. 支持gulp，grunt等工具的使用

• 缺点：

1. 相比较liveStyle 而言liveReload 修改是单向的, 也就是浏览器 -> 编辑器 这一功能是没有的 (当然这是相对来说)
2. 只能在单一页面起作用，如果我开两到3个不同分辨率的页面做响应式或手机端，liveReload 就不美了。

三、Broswer-Sync https://browsersync.io/

• 安装
  npm install -g browser-sync

• 启动

1. 静态网站 - 如果您只使用.html文件，则需要使用服务器模式。
   browser-sync start --server --files "css/*.css"

2. 动态网站 - 如果您已经在运行PHP或类似的本地服务器则需要使用代理模式。
   browser-sync start --proxy "myproject.dev" --files "css/*.css"

3. 需要注意的是
   对于指令对于命令中的 css/*.css 和 myproject.dev 要根据实际文件夹名称，文件路径进行调整

• 优点 :

5. 相较于以上2种工具, Broswer-Sync 的应用范围更广,使用者更多, 这就意味着你所可能遇到的麻烦越少
6. liveReload 是浏览器的 F5, 而Broswer-Sync 则是只针对修改的文件进行视图同步
7. 无论你开多少页面，只要内容修改页面内容都是随着变化，响应式，手机端调试等都是极好的。
8. 官方展示的优点如下

四、对比