前端实时可视化开发工具:liveStyle、liveReload、Broswer-Sync。
一 、liveStyle http://livestyle.io/
-
安装分两部分
浏览器和编辑器同时安装插件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 则是只针对修改的文件进行视图同步
- 无论你开多少页面,只要内容修改页面内容都是随着变化,响应式,手机端调试等都是极好的。
- 官方展示的优点如下