Browsersync

安装

全局安装

如果你希望以命令行的方式在任何一个目录启动 Browsersync，那么需要你全局安，使用下面这行命令即可：

npm install -g browser-sync

本地安装

本地安装则是直接将 Browsersync 直接安装至你的项目中，这是应该优先选择的方式，安装完成之后，便将 Browsersync 作为你的项目的一个依赖添加至 package.json 文件中，这样所有的人都会在使用你的项目时，自动安装 Browsersync。

npm install browser-sync --save-dev

不管是全局安装，还是本地安装，请都不要使用 sudo，如果你在安装过程中告诉你需要使用 sudo，你可以通过 《修复 npm 的权限》这篇文章修复，很简单，只需要一分钟不到。

与 Gulp.js 配合

安装

在你的项目中安装 browsersync 与 gulp：

npm install browser-sync gulp --save-dev

然后在 gulpfile.js 中添加如下代码：

var gulp = require('gulp');

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

// 服务本地静态文件
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './www/'
        }
    })
});

// 代理你的其它的项目
gulp.task('browser-sync', function() {
  browserSync.init({
      proxy: "yourlocal.dev"
  })
});

之后，在你的项目中即可以使用以下方式直接打开开发服务器了：

gulp browser-sync

SASS 与 CSS 注入

Browsersync 支持数据流，所以你可以在一个特定的时间点重载页面，比如你修改了某个CSS文件或者HTML（注意，你需要在 gulp.dest 之后再调用 .stream）。

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

// 服务本地静态文件
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './www/'
        }
    });

    gulp.watch('./scss/*.scss', ['sass']);
    gulp.watch('./www/*.html').on('change', browserSync.reload);
});

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('www/css'))
    .pipe(browserSync.stream());
});

gulp.task('default', ['browser-sync']);

与比对应的项目目录结构如下：

project/
    scss/
        main.scss
    www/
        index.html
        css/
            main.css
    gulpfile.js

ruby-sass 与 sourcemap

如果使用了 gulp-ruby-sass ，并且开启了 sourcemap: true ，附加的 .map 文件也会被生成，如下：

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

// 服务本地静态文件
gulp.task('browser-sync', ['sass'], function() {
    // 初始化 browser-sync
    browserSync.init({
        // 设置服务器
        server: {
            // 根目录为 ./www/
            baseDir: './www/'
        }
    });

    // 观察 ./scss 目录下所有 scss 文件的变更，同时将变更通知给 sass task
    gulp.watch('./scss/*.scss', ['sass']);
    // 观察 ./www 目录下的所有 .html 文件，当其修改时， browser-sync 重新加载(reload)
    gulp.watch('./www/*.html').on('change', browserSync.reload);
});

// sass 任务
gulp.task('sass', function() {
  return sass('scss/*.scss', {
      sourcemap: true
  }).on('error', function(err){
      console.error('Error!', err.message);
  }).pipe(sourcemaps.write('./www/css', {
      includeContent: false,
      sourceRoot: 'scss'
  })).pipe(browserSync.stream({
      match: '**/*.css'
  }))
});

gulp.task('default', ['browser-sync']);