如果向 master.css 添加新组件，浏览器同步不会重新加载

Question

如果我将一个新组件 (_example.scss) 添加到我的 master.scss 并保护它，我的浏览器同步会自动重新加载并显示来自“_example.scss”的样式更改。如果我更改此文件中的其他内容并确保其安全，我的浏览器不会重新加载...有什么想法吗？如果我重新启动 gulp，它会完美运行。是否可以重新初始化通过浏览器同步进行的文件？

这是我的 gulpfile.js：

var gulp = require('gulp');  
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var cssmin = require('gulp-cssmin');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var changed = require('gulp-changed');
var autoprefixer = require('gulp-autoprefixer');
var reload = browserSync.reload;

// Compile
gulp.task('sass-master', function () {  
    gulp.src('./files/layout/scss/master.scss')
        .pipe(plumber())
        .pipe(sass({}).on('error', function(err) {
            return notify().write(err);
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssmin())
        .pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
        .pipe(gulp.dest('./files/layout/css'))
        .pipe(notify('sass-master-task done, ready!'));
});
gulp.task('sass-ieframe', function () {  
    gulp.src('./files/layout/scss/base/ieframe.scss')
        .pipe(plumber())
        .pipe(sass({}).on('error', function(err) {
            return notify().write(err);
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssmin())
        .pipe(gulp.dest('./files/layout/css'))
        .pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
        .pipe(notify('sass-ieframe-task done, ready!'));
});
gulp.task('sass-fonts', function () {  
    gulp.src('./files/layout/scss/base/fonts.scss')
        .pipe(plumber())
        .pipe(sass({}).on('error', function(err) {
            return notify().write(err);
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(cssmin())
        .pipe(gulp.dest('./files/layout/css'))
        .pipe(autoprefixer('last 2 version', '> 1%', 'ie 7', 'ie 8'))
        .pipe(notify('sass-fonts-task done, ready!'));
});

// Serve
gulp.task('browser-sync', function() {
    browserSync.init(['./files/layout/css/*.css'], {
        proxy: 'dumb-test'
    });
});

// Reload Task
gulp.task('bs-reload', function () {
    browserSync.reload();
});


// Watch Task
gulp.task('default', ['sass-master', 'sass-fonts', 'sass-ieframe', 'browser-sync'], function () {
    gulp.watch(['./files/layout/scss/**/*.scss', './files/layout/scss/master.scss', '!./files/layout/scss/base/ieframe.scss', '!./files/layout/scss/base/fonts.scss'], ['sass-master', 'bs-reload'])
    gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe', 'bs-reload'])
    gulp.watch(['./files/layout/scss/base/fonts.scss'], ['sass-fonts', 'bs-reload'])
    gulp.watch(['./templates/**/*'], ['bs-reload'])
    gulp.watch(['./files/**/*.+(png|jpg|gif|svg)'], ['bs-reload'])
});

Answer 1

我会说这是一个时间问题。 Gulp 并行运行任务，并且您的重新加载任务应该真正等到构建完成之后。例如而不是

gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe', 'bs-reload'])

应该是

gulp.watch(['./files/layout/scss/base/ieframe.scss'], ['sass-ieframe-watch'] 

有一个单独的任务

gulp.task('sass-ieframe-watch', ['sass-ieframe'], function(done) {
  browserSync.reload();
  done();
});

更好的是让您的 sass 任务使用流选项重新加载任务本身。上述样式用于除 sass 之外的所有内容。这样 browserSync 无需重新加载整个页面即可注入新的 css，但 js 和 html 仍然需要重新加载。见https://www.browsersync.io/docs/gulp