前端实时可视化开发工具

三种工具的使用：

liveStyle

官网：http://livestyle.io/

Emmet LiveStyle有如下几个特点：
1. 即时更新(不会重新加载页面，样式修改以后无需保存也能预览);;
2. 多个页面同时预览(例：同时打开多个页面，并且关联到相同的CSS，此时修改该CSS，这些页面都能即时显示修改内容);
3. 双向修改(在Chrome开发者工具和Sublime Text中，只要有一处修改，两个工具的样式都会更改。)
4. 便捷的安装和使用。

支持三种CSS, LESS and SCSS

需要安装浏览器的插件和编辑器的插件

安装浏览器的插件

1.浏览器插件通过搜索chrome网上商店“Emmet liveStyle”进行安装
2.点击右上角的添加至Chrome按钮

如果你的chrome应用商店无法打开，你从 http://pan.baidu.com/s/1qYO2C36 或者其他途径获得了Emmet LiveStyle插件，那么就选择离线安装该插件。由于Emmet LiveStyle插件同其他chrome插件一样都是CRX格式的，下载完成后，新开一个TAB，输入chrome://extensions/ 打开下载管理器，找到刚刚下载成功的文件,拖放刚刚的crx文件到界面里，松开鼠标，会弹出安装提示，点击确定安装就可以了。

控制台出现如下图显示的样子，即为安装成功。


安装编辑器的插件

安装Sublime Text插件最简单的方法就是通过Package Control，这是安装Sublime Text插件比较好的方式：Package Control会管理所有的插件安装的流程，为你进行自动更新。
1.正如描述所说的安装Package Control(如果你到现在还没有安装Package Control)。
2.在Sublime Text中点击Tools > Command Palette…菜单栏。
3.在弹出的对话框，输入install package来找到Package Control: Install Package菜单栏，用方向键进行选择然后敲击回车。
4.当载入完成，你可以看到带有可用的包列表的对话框，输入livestyle来找到LiveStyle包，然后敲击回车。

过一会LiveStyle插件就会成功安装，你可能会重启Sublime Text来确保所有的东西都正常工作。

在你相继安装浏览器插件以及编辑器插件后，你就可以开始使用LiveStyle。
LiveStyle的所有的设置都是通过Google Chrome扩展控制的：

打开一个需要测试的网页，然后开启livestyle监测样式的变化即可。

liveReload

可参考http://blog.csdn.net/neet007/article/details/51694643 LiveReload插件安装、配置及用法

Broswer-Sync：官网 http://www.browsersync.cn/

描述：修改监控的文件后，自动刷新页面

1.包管理（npm）库中 安装BrowserSync。打开一个终端窗口，运用npm全局安装browser-sync ，安装完成后，可以在所有项目(任何目录)中使用。

npm install -g browser-sync

也可以结合 gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令:

npm install --save-dev browser-sync

2.主要是运用browser-sync start --server --files "**" 命令来监控文件，假如你要监控D:\dist\core\static 整个目录下的文件，那你就可以 cd 跳到这个目录下运行：

cd D:\dist\core\static
D:\dist\core\static>browser-sync start --server  --files "**"//监控该目录下的所有文件的变化
回车

3.启动 BrowserSync

静态网站

---

如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css"

如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址，这一切都会在命令行工具里显示。

// 监听css文件 
browser-sync start --server --files "css/*.css"
// 监听css和html文件 
browser-sync start --server --files "css/*.css, *.html"

动态网站

如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。

browser-sync start --proxy "Browsersync.cn" "css/*.css"

参考文章：http://blog.csdn.net/neet007/article/details/51694643 LiveReload插件安装、配置及用法