用browsersync提高效率

browsersync是一个高效的用于“实时刷新”的工具

一般来说，当我们进行项目开发时，文件保存以后，需要通过刷新浏览器来查看修改后的效果。而且，由于习惯，一般开发者都会多刷几遍。那么在强调高效开发的今天，有没有什么工具提高这种重复的工作的低效率呢？

这就是我们今天要介绍的browersync

先来看个比较直观的效果图：

 

先是安装：

先确保安装了node环境。进入终端后，输入以下进行全局安装。

npm install -g browser-sync

 

使用：

在终端中进入项目目录，当我们本地没有起服务的时候，执行以下代码：

browser-sync start --server --files "css/*.css"

 

这里的start和server其实就是browser起了一个服务，默认端口可以在终端中看到，后面的files表示监听文件的改变，```css/*.css```指监听哪些文件的改变，如果只是想项目做出改变就有所监听的话可以使用```--files "**"```

如果本地通过php,node,nginx等起了服务，对于这些动态站点使用代理模式：

browser-sync start --proxy "localhost:4000" --files "**"

 

BrowserSync会提供一个新地址用于访问。运行结果如下：

可以看到，browsersync起的本地服务地址端口是3000，3001端口是它的一个UI界面控制的端口。

目前的使用可以起个本地服务搭配browsersync来使用，结合OSX-EI-Capitan最新的分屏功能(如果本身是用双屏的人就更好了)，还是挺舒服的。

当然了，为了适应自动化的开发流程，browser-sync也是支持grunt和gulp的，以[gulp]为例，在gulp的配置文件中再新添一个gulp任务

var gulp = require('gulp');
var browserSync = require('browser-sync');

// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});

// or...

gulp.task('browser-sync', function() {
browserSync.init({
proxy: "yourlocal.dev"
});
});

 

然后执行这个gulp任务。

使用分屏的小伙伴更方便点，右边编辑代码左边就能即时刷新。否则也许还是会习惯性地刷新一下。

更多详情请看[这里](http://www.browsersync.io/docs/)