gulp-watch - 重新加载后 Gulp browserSync 不断滚动到顶部

Question

我有 Gulp 和 BrowserSync 的问题，这确实是一个小问题，但却困扰着我。

每次我更改 scss 文件并运行 sass() 对其进行组合时，浏览器都会重新加载并滚动回顶部。

有没有办法防止浏览器每次更改 scss 文件时都这样做？

顺便说一下，这仅发生在 sass 任务上，js 和 php 任务不会导致浏览器滚动到顶部。

我尝试了 Chrome 和 Firefox，我得到了相同的行为。

这是我的 gulpfile.js

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        proxy: "mysite.dev"
    });

    gulp.watch("styles/scss/*.scss", ['sass']);
    gulp.watch("*scripts/*.js", ['js']);
    gulp.watch("*.php", ['php']);
});

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

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

有没有办法阻止它？

Answer 1

更新 - 两天后，我无法再重现该问题。不确定下面的代码是否真的解决了它。
解决方案:附加 .on('change', browserSync.reload)保存 SCSS 文件时，到您的 Gulp Sass 监视行应阻止您的浏览器滚动重置。
(注意 - Gulp v4)

gulp.watch('scss/**/*.scss', sassCompile).on('change', browserSync.reload) // Gulp v4 version 

gulpfile.js 示例:

var gulp = require('gulp');
const { series } = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

function serve(){
  browserSync.init({
    server: {
        baseDir: "./"
    },
  });
  gulp.watch('scss/**/*.scss', sassCompile).on('change', browserSync.reload);
  gulp.watch('./css/*.css').on('change', browserSync.reload);
  gulp.watch("./*.html").on('change', browserSync.reload);
}
exports.serve = serve;

function sassCompile(cb) {
  return gulp
      .src('./scss/*.scss')
      .pipe(sass()) // Converts Sass to CSS with gulp-sass
      .pipe(gulp.dest('css'))
      .pipe(browserSync.stream());
  cb();
}
exports.sass = sassCompile;

exports.default = series(serve);

运行 : 在命令行输入

gulp