上一篇我们简单介绍了browsersync的基础的用法，但在实际开发中，我们常常需要使用gulp或grunt对项目中的js和css等文件进行相应的压缩，实现自动化构建。由于browsersync在调试方面具有很强的优势，所以在项目中可以考虑他们的集成。本文主要介绍gulp和browser-sync的集成。

安装

首先，安装browsersync和gulp的依赖包，并把它们添加到项目依赖中。

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

然后，在你的gulpfile.js文件中添加相应的task。

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

//添加browser-sync的task
gulp.task('browser-sync', function() {

    //browser-sync的初始化
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

上面是基础的task，我们会把根目录（gulpfile所在文件目录）下面的所有文件映射到一个静态服务器中。但有时候我们项目的不会如此简单，比如我们不需要访问node_modules中的文件，我们只需要能够访问dist和bower_components目录中的内容等等。

常见配置示例

访问固定目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
gulp.task('browser-sync', function() {
    browserSync.init({
        // 访问dist目录下文件
        server: "dist",

        // 访问dist目录下文件并且显示文件列表
        // server: {
        //     baseDir: "dist",
        //     directory: true
        // },

        // 多个文件目录映射
        // server: ["app", "dist"],

        // 访问dist目录，并且初始页面为index.html
        // server: {
        //     baseDir: "dist",
        //     index: "index.html"
        // },

        // 版本1.2.1后支持
        // 页面中加载以"/bower_components"开头的文件时自动从bower_components中寻找
        // server: {
        //     baseDir: "dist",
        //     routes: {
        //         "/bower_components": "bower_components"
        //     }
        // }
    });
});
高级配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./dist",
            index: "main.html",
            routes: {
                '/bower_components': 'bower_components'
            }
        },

        // 在一个设备上进行点击，滚动，输入操作时是否映射到其他设备(默认为true)
        ghostMode: false,

        // 公网地址
        tunnel: true, // 随机选取，xxx.localtunnel.me
        // tunnel: 'hello', // 生成 hello.localtunnel.me

        // 浏览器自动打开是显示的地址
        open: "local", // 自动打开 http://localhost:3000
        // open: "external", // 自动打开 http://192.168.xxx.xxx:3000
        // open: "tunnel", // 自动打开 http://xxx.localtunnel.me，需设置tunnel
        // open: false, // 不要自动在浏览器打开
        // open: 'ui', // 打开UI控制台

        // 自动打开的浏览器，默认为default，
        // browser: "google chrome",
        // browser: ["google chrome", "firefox"], // 同时在Chrome和Firefox中打开
        
        // 服务的端口号，默认从3000开始扫描，直到找到一个没有使用的端口号
        port: 8080,

        // 打印log的级别
        logLevel: "debug", //debug级别以上的日志
        // logLevel: "info", //info级别以上的日志
        // logLevel: "silent", //不打印任何日志到控制台

        // 日志前缀
        logPrefix: "My Project", 
        // [My Project] Local URL: http://localhost:3000
        // [My Project] Watching files....
        // [My Project] File changed: "index.html"

        // 是否在浏览器显示通知
        notify: false,
    });
});

文件监听和重载

在我们开发调试阶段，有时会需要对文件监听，实现scss自动编译。

SASS + CSS 注入

在browsersync中使用流，这样你可以在你任务指定的地方调用reload，同时所有的浏览器将被告知变化，因为browsersync只关注完成编译后css，请确保在gulp.dest之后调用.stream()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// 静态服务器 + 监听 scss/html文件
gulp.task('serve', ['sass'], function() {

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

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

// 编译sass为css文件，并自动注入到浏览器中
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);
浏览器的重载

有时候，你可能想整个页面都重新加载（例如在处理了一堆js文件），但是你想reload事件发生在task执行完成后。这在gulp 4.x.x将会变的很容易，但是现在你可以按下面的做：（确保你所有tasks都return流，这样browserSync.reload()就会在正确的时候被调用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// 处理js文件并返回流
gulp.task('js', function () {
    return gulp.src('js/*js')
        .pipe(browserify())
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

// 创建一个task以确保js任务在浏览器重载前完成
gulp.task('js-watch', ['js'], function (done) {
    browserSync.reload();
    done();
});

// 使用默认任务去加载browsersync，同时监听文件
gulp.task('serve', ['js'], function () {

    // 从项目根目录启动服务器
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    // 添加browserSync.reload到任务队列中以确保所有浏览器在tasks执行完后reload
    gulp.watch("js/*.js", ['js-watch']);
});

结语

本文介绍了gulp和browsersync的集成使用，基本的配置参数可参照上一篇web开发神器——browsersync(1)。需要注意的是sass文件重新编译为css，或是js文件合并时，我们可以通过stream的方式将改变注入到所有浏览器中。

参考

  1. Browsersync + Gulp.js