5

我对 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']);

有没有办法阻止它？

4

1 回答 1

1

更新- 两天后，我无法再重现该问题。不确定下面的代码是否真的解决了它。

解决方案：在保存 SCSS 文件时，附加.on('change', browserSync.reload)到 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
于 2021-01-03T16:13:45.627 回答