回风舞雪

这东西很不错，可以让浏览器和我们的文件同步显示，意思是，你一修改完 css 或者 js 或者 Html，立即就能看到浏览器里他们的变化。 You’re worth it!

官方网站：http://www.browsersync.io

安装

npm install -g browser-sync

国内玩家，如果速度太慢，可以先安装 cnpm， 然后：

cnpm install -g browser-sync

当然，过程中还会用到 github 所以最好还是有 VPN 或 shadowsocks 配合 proxychains-ng

安装成功后，运行browser-sync命令可以出现帮助和说明，说明安装成功了，想要在那个项目里使用就先到那个目录下，然后运行：

npm init

npm install browser-sync --save-dev

--save-dev 参数用来将 browser-sync 作为开发依赖放到package.json 里去。

使用

这里以宁皓网的 github 上的 forest 为用例代码：

git clone https://github.com/ninghao/forest

启动服务

# --server 表示要启动一个服务器，后面跟的是要启动的服务所在根目录，不指定会是命令当先位置
# --files 指定要监视的文件，比如监视了 index.html 和 css 文件夹里的 css 文件
browser-sync start --server forest --files "forest/index.html, forest/css/*.css"

成功后，会自动打开浏览器，管理 browser-sync 在 http://localhost:3001

其他参数

--tunnel:与所有人同步 就是说，你的修改可以公布给网上的人，有地址，让他们都可以看到，地址是随机生成的。

--proxy:代理 这个功能很有用，我们一般开发的 php 动态的网站有依赖的一些环境，有了这个代理就方便了，比如，我们的测试地址是:http://test.dev那么我们就这么写这个参数：

--proxy test.dev

然后访问http://localhost:3000即可

把 browser-sync 作为 Gulp 的任务

安装 gulp ：npm install gulp --save-dev

在forest目录的上级目录下添加一个 gulp 文件gulpfile.js:

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

gulp.task('browser-sync', function () {
  browserSync.init({
    server:{
      baseDir: './forest'
    },
    files: ['forest/index.html', 'forest/css/*.css']
  });
});

安装 gulp 的命令行工具：npm install -g gulp

执行任务：gulp browser-sync。

如果报错说Cannot find module 'browser-sync',对应的代码行是var browserSync = require('browser-sync').create(); 请再次运行并保证成功：npm install gulp --save-dev然后再执行刚才的任务