提高你开发效率的工具 -- BrowserSync

作者： Yeaseon
Blog：https://yeaseonzhang.github.io

Browser-Sync是一款前端实时可视化开发工具，之前老旧的开发环境需要修改完code，在浏览器按F5查看更新后的效果，这样一次不会有什么感觉繁琐，但是长时间的手动刷新页面，确实会浪费很多时间。

当你有了Browser-Sync之后，你的F5基本上可以退休了。

介绍

Browser-Sync是一款基于node的模块，这样你就可以无视操作系统和浏览器，尽情使用Browser-Sync。
Browser-Sync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

安装

因为Browser-Sync是基于node的模块,所以我们需要使用NPM来安装Browser-Sync。

npm install -g browser-sync

用法

用命令行工具进入你的项目目录下，建议进入需要监听的文件目录下，如果是监听根目录太浪费资源了。

browser-sync start --server --files "**"

**是监听该目录任意文件，你也可以指定需要监听的文件名。

这样在浏览器访问localhost:3000/*.html就能实时在页面中响应你代码的变化。

访问localhost:3001,你就会感叹Browser-Sync ** It's awesome !!! **

详情

详细说明请访问官网，配合gulp或者grunt使用更赞。