首页 > 求问:gulp+browserSync中两种不同写法的区别?

求问:gulp+browserSync中两种不同写法的区别?

想问一下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);这里监听的文件改变都是会导致页面完全刷新的,有啥办法也变成局部刷新么?

求懂的回答我一下,拜谢!


谢邀,这个我还真没注意过,我一直用的也是方案 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,这个不会,得花时间调研

【热门文章】
【热门文章】