鞍山网站开发上海seo关键词优化
前端实时可视化开发工具：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 则是只针对修改的文件进行视图同步
- 无论你开多少页面，只要内容修改页面内容都是随着变化，响应式，手机端调试等都是极好的。
- 官方展示的优点如下
四、对比
