前端实时可视化开发记录

前端的实时可视化开发是指修改文件能够实时在浏览器端刷新显示

实现前端实时可视化开发一般有3个工具：liveStyle、liveReload、Browser-Sync

liveStyle
实时CSS调试工具，是针对样式的一种前端实施可视化的编辑，支持三种文件分别是CSS，LESS和SCSS。
要使用它需要安装两个工具
1.浏览器Chrome插件
2.编辑器Sublime插件
如果之前装了低版本的需要卸载重装
输入Package Control Remove Package，选择liveStyle卸载
输入Package Control Install Package，输入liveStyle安装
注意：

1.chrome浏览器的livestyle插件安装好，submitext3也安装好了，还是没法用，原因很简单，就是没有搭建本地http服务，需要搭建本地http服务，可以安装配置wamp进行使用
     2.默认是不能打开本地文件的 就向我们在本地写的html文件，必须要在浏览器设置---更多工具---扩展程序，勾选上其中的允许访问文件网址。
测试成功的说明步骤：
1.Chrome、Sublime安装好livestyle插件。
2.之前我电脑就有node环境，现在使用npm install http-server -g安装http-server插件。
3.cmd定位到项目目录下，输入：http-server，启动成功后，页面输入 http://localhost:8080 访问即可。
接下来就可以进行可视化同步的操作了。

liveReload
能够监控所有文件修改，检测到修改后刷新页面。不仅支持样式文件的浏览器端实时显示效果，还能支持html和js文件包括图片文件等一切文件的实时修改效果
测试成功后的步骤：
1.上面说的Server不能停，不然 http://localhost:8080 就不能显示调试的页面了。
2.Chrome安装livereload插件。
3.CMD到项目目录，输入livereload命令，然后点击浏览器上面插件，让其变为黑色实心圆。
这样就可以进行可视化调试了。

Browser-Sync
开源、可安装在任何地方，只依赖nodejs
启动一个代理服务器，代理服务器监听文件变化，通过TCP长连接，并且仅对变化的文件部分进行视图的统计
Browser-Sync、liveReload区别
A.Browser-Sync局部刷新，而liveReload本质是帮你做了F5操作，页面刷新。
B.Browser-Sync和liveReload都支持监控所有类型文件的实时的页面更新，且都是单向的，只能修改文件更新页面而不能修改页面去更新文件。均支持gulp脚本，区别在于Browser-Sync不需要安装浏览器插件，它只依赖于nodejs插件
C.Browser-Sync可以实现手机浏览器、PC浏览器或者多个浏览器之间的同步，这个同步包括视图同步和交互的同步

使用步骤：
1.安装插件Broswer-Sync，npm install -g browser-sync
2.CMD到项目目录，然后运行命令browser-sync start --server --files "**"
就可以进行实时动态可视化了。