求问：gulp+browserSync中两种不同写法的区别？

Question

想问一下gulp+browserSync中两种不同写法的区别？

首先引入插件

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

sass任务

gulp.task('sass',function(){
  gulp.src('dev/scss/**/*.scss')
  .pipe(sass())
  .pipe(dest('dev/css'))
//此处是————————————————————————————————————写法A(AB二选一）
.pipe(browserSync.stream());
//此处是————————————————————————————————————写法B(AB二选一）
.pipe(browserSync.reload({stream:true});
}

监听调用

gulp.task('serve',['sass'],function(){
//指定服务器启动目录
  browserSync.init({server:'dev'});

//监听SCSS文件改变
gulp.watch('dev/scss/**/*.scss',['sass']);

疑问：

gulp serve执行以后发现
当使用写法A时，SCSS文件改变后，整个浏览器页面都全部刷新了
二使用写法B时，SCSS文件改变后，浏览器页面上只有被改变的地方局部刷新了

疑问一：所以A和B写法有什么不同呢？求解- -

疑问二：gulp.watch('dev/*.html).on('change', browserSync.reload);这里监听的文件改变都是会导致页面完全刷新的，有啥办法也变成局部刷新么？

求懂的回答我一下，拜谢！

Answer 1

谢邀，这个我还真没注意过，我一直用的也是方案 B

browserSync.reload({stream:true}

对于你提到的，我也很困惑的，看API文档
https://www.browsersync.io/do...
当 reload 方法，不传参数的时候，是刷新浏览器
传 {stream:true} 相当于调用 stream 方法, 这个源码中写的很清楚，虽然文档上没说

查了一些源码 https://github.com/BrowserSyn...

 if (_.isObject(opts)) {
            if (!Array.isArray(opts) && Object.keys(opts).length) {
                if (opts.stream === true) {
                    return stream(emitter)(opts);
                }
            }
        }

对于stream方法, 文档上给出的例子，也不会刷浏览器。
https://www.browsersync.io/do...

另外，能提供 browsersync 的具体版本给我吗，我需要进一步确认一下？

所以这第一个问题，目前暂时不能回答，按照上面的分析应该是一样的吧！

另外你的第二个问题， 看你的意思是如果html变化了后，只需为html跟新部分变化的dom，这个不会，得花时间调研