如果你用 Gulp 为项目创建了一些自动执行的任务，你也可以把 Browsersync 做成一个 Gulp 任务 .. 打开终端 ... 进入到我们最开始创建的这个项目所在的目录 ...

这里已经安装好了 browser-sync，所以我们只需要再去安装一下 gulp ..

npm install gulp --save-dev

再用编辑器打开这个项目 ..

atom .

新建一个 gulp 任务文件 .. 文件名是 gulpfile.js .. 先把这两个模块引用进来 .. 一个是 gulp

req

还有就是 browser-sync .. 注意这里需要用一个 create 方法创建一个对象 ..

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

再去添加一个 browser-sync 的任务 .. gulp.task .. 任务的名字设置成 browser-sync .. 再用一个匿名函数 .. 在它里面使用 browserSync 的 init 这个方法 .. 给这个方法一个对象 ... 在这个对象里是 browser-sync 的一些选项，可以配置一下它的一些行为 ..

比如我们要创建一个服务器，可以在这个对象里添加一个 server 属性 .. 这个属性的值又是一个对象 .. 关于这些选项你可以参考 Browsersync 官方的文档 ..

http://www.browsersync.io/docs/options/

这里用一个 baseDir .. 设置一下服务器的根目录 .. 它的值设置成 ./forest 表示使用项目的根目录下的 forest 作为服务器的根目录 .. 下面再添加一个 files 属性，指定一下要监视的文件 .. 把这些文件模式放到一个数组里 .. 一个是 forest/index.html ，逗号分隔开 ... 还有就是 forest 下面的 css 目录下的所有的 css 文件 .. 保存 ..

回到终端 ... 你需要再安装一下 gulp 的命令行工具 ...

npm install -g gulp

完成以后，再执行：

gulp browser-sync

现在我们就可以使用 browser-sync 的功能了 .. 使用 Gulp 的好处就是，你可以保留对 browser-sync 的设置 .. 可以配合其它的任务一起使用。