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) 附加到您的 Gulp Sass 监视行应该会阻止您的浏览器在保存 SCSS 文件时滚动滚动。

（注意 - 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

Gulp browserSync在重新加载

1 个答案: