Browsersync + Gulp.js

没有官方版本的 Gulp 插件，因为不需要！你只需 require 本模块，调用 API 并通过 参数 配置它即可。以下是一些常见的 流行项目中的用例，例如 Google's web starter kit 等。

首先，安装 Browsersync 和 Gulp 并作为开发依赖模块。

$ npm install browser-sync gulp --save-dev

然后，在 gulpfile.js 文件中使用他们：

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

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

// or...

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

Browsersync 支持流（stream），因此你可以在任务（task）执行过程中的某个时间点调用 reload 方法， 并且所有浏览器都将被通知到这些修改。由于 Browsersync 只关心你的 CSS 文件何时被 完成编译 - 因此务必在 gulp.dest 后调用 .stream() 方法。

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

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

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

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

如果你使用了 gulp-ruby-sass 插件并设置了 sourcemap: true 参数，将生成额外的 .map 文件。当 browserSync.reload() 接收到这些文件时，他将尝试 重新加载整个页面（因为在 DOM 中找不到任何 .map 文件）。

为了解决这些问题，请使用 browserSync.stream({match: '**/*.css'}) 方法，如下所示：

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

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

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

/**
 * Compile with gulp-ruby-sass + source maps
 */
gulp.task('sass', function () {

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

有时，你可能希望重新加载整个页面（例如，在处理完一堆 JS 文件之后），并且， 你希望是在任务执行之后重新加载。这种需求在 gulp 4.x.x 中很容易实现，但是，现在你可以执行以下操作，, but for now you can do the following （确保从任务中 return 流（stream），以保证 browserSync.reload() 在正确的时间被调用）。

如果你使用的是gulp 4.x.x ，那么你可以 按照此文档 操作。

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

// process JS files and return the stream.
gulp.task('js', function () {
    return gulp.src('js/*js')
        .pipe(browserify())
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
    browserSync.reload();
    done();
});

// use default task to launch Browsersync and watch JS files
gulp.task('default', ['js'], function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    // add browserSync.reload to the tasks array to make
    // all browsers reload after tasks are complete.
    gulp.watch("js/*.js", ['js-watch']);
});

如果对流（stream）的支持无能满足你的需求，你可以在任务（task）中手动调用 reload 方法。 下面这个例子中将像以前一样编译并自动注入 CSS ，但是当 HTML 文件 更改后，浏览器才重新加载。

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

// Save a reference to the `reload` method

// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("*.html").on("change", reload);
});

Jump to...