Question

当我在scss结构上使用partial时，我必须处理频繁的浏览器同步错误（比如永远重新加载）。请注意，这是一个间歇性错误，因此它不是一个常见的编译问题（尽管它可能有些相关），并且当我不使用partial时它不会发生。此外，我不认为它是项目相关或gulpfile问题，因为它发生在任何项目，我尝试了多个gulpfile结构。无论如何，您可以在下面查看：

var gulp = require('gulp');
var sass = require('gulp-sass');
var clean = require('gulp-clean');
var browserSync = require('browser-sync').create();
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function () {
    gulp.src('src/scss/app.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(gulp.dest('src/css'))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task('copy', ['clean'], function () {
    return gulp.src('src/**/*')
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function () {
  return gulp.src('dist')
         .pipe(clean());
});

gulp.task('serve',function () {

    browserSync.init({
        server: {
            baseDir: 'src/'
        }
    });

    gulp.watch('src/scss/*.scss', ['styles']);
    gulp.watch('src/**/*').on('change', browserSync.reload)

});

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

Answer 1

可能会有所帮助的一些事情：（1）在您的“样式”中添加一个返回语句＆＃39;任务和（2）删除第二个手表，因为它调用了在＆＃39;样式结束时调用的browserSync.reload。任务，你不需要两次打电话。所以做出这些改变：

gulp.task('styles', function () {
  // added return below
  return gulp.src('src/scss/app.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.reload({stream: true}));
});

并且第二只手表是不必要的，可能是一个问题：

gulp.task('serve',function () {

  browserSync.init({
    server: {
        baseDir: 'src/'
    }
  });

  gulp.watch('src/scss/*.scss', ['styles']);
  //  remove below watch
  //  gulp.watch('src/**/*').on('change', browserSync.reload)

  gulp.watch("./*.html").on("change", browserSync.reload);

});

gulp partials导致浏览器同步错误

1 个答案: