实时刷新静态页面工具-Browsersync

最近在写静态页面，每次修改一点就要去刷新一下页面，实在是太烦了。于是在网上找到了一款 省时神器 Browsersync，通过npm来安装非常方便。

安装Browsersync

首先要确定本地环境已经安装好node，然后通过命令

install -g browser-sync

启动Browsersync

安装成功后，我们在本地建一个文件来进行测试Browsersync是否能正常启动

-css

  |-test.css

-index.html

然后启动 Browsersync 对文件进行监听, index.html所在路径下打开终端窗口

//--files 表示路径是相对于运行该命令的项目
browser-sync start --server --files "*.html"
//对多个进行监听
browser-sync start --server --files "css/*.css, *.html"

启动成功会出现下面这个

如果你项目根目录下有 index.html 这个文件，则启动服务后，在浏览器地址栏输入：http://localhost:3000 则显示index.html的内容，如果不是的话会出现下面的情况：

如果想打开目录下的hello.html ，我们还需要在后面输入 hello.html 才能显示我们想要的页面， http://localhost:3000/hello.html

最后

在启动后出现的这种情况也是我刚好在没有建index.html的时候出现，当时不知道出现什么问题，当时挺折腾的，所以觉得有必要写下来，记住以后建项目要规范点，index.html 是默认入口文件
附上Browsersync官网链接:http://www.browsersync.cn