前端实时可视化开发工具分类体验！

学习前端的html.css 实时的可视化调试，方便开发与学习。我们先进行几个工具的对比。

livestyle 只能实时同步css 文件，不能同步html文件。

livereload 简单的web的项目开发。

browsersync 比前两个都比较全面一点，这次我们重点介绍 browsersync 结合sublime 3环境的配置进行练习。

如果想详细了解这三个方案的具体特性请查看链接：https://www.imooc.com/learn/718 慕课网友详细的介绍。

sublime 3进行下载 ,有绿色版本，因为博客中无法上传文件，在这不进行上传。

配置browsersync 首先需要安装node.JS 安装链接http://www.runoob.com/nodejs/nodejs-install-setup.html

安装流程自己查看。

安装完成node.js后，进行browsersync的安装

您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令：

npm install -g browser-sync

这条命令相当于告诉包管理器下载BrowserSync文件，并在全局下安装它们，您可以在所有项目(任何目录)中使用。

启动 BrowserSync
一个基本用途是，如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：

静态网站

如果您想要监听.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"

我们做了一个静态例子的示范，您可以下载示例包，文件您可以解压任何盘符的任何目录下，不能是中文路径。打开您的命令行工具，进入到BrowsersyncExample目录下，运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000 地址， 这一切都会在命令行工具里显示。如果遇到can not GET/这样的提示，说明你在当前文件夹下没有index.html文件，如果想查看的是当前目录下的css文件夹下面的某html5.html文，要更改访问地址为：http://localhost:3000/css/html5.html ，这样就能正常访问了。

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

注意个几点：

1.启动后报错，打开localhost：3000，提示cannot get 

  没有定义启动监控文件。

browser-sync start --server --files "d:/web" "**/*.css"，*.html"

d:/web 目录下一定有你需要监控的文件，