Gulp sass和browsersync重新加载浏览器而不是注入css

Question

我正在使用最新的gulp sass和browsersync。 在编辑并保存scss文件后，它会编译并看到“injecting styles.css”， 但浏览器也会重新加载。

不确定何时更改，但它过去只是注入新的css文件而不重新加载。

我的任务：

var sassFiles = './app/assets/sass/**/*.{scss,sass}';
var cssFiles = './app/assets/css';
var cssBuildFiles = './build/assets/css';

var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'compact'
};

var autoprefixerOptions = {
  browsers: ['last 2 versions']
};


  gulp.task('sass', function () {
  return gulp
    .src(sassFiles)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(cssFiles))
    .pipe(browserSync.stream());
});

有一次，我使用过滤器只将css文件传递给browsersync，因为有人告诉我地图文件正在触发重新加载。 不确定我是否真的需要这样做，因为大多数在线示例都像我在这里...

Answer 1

1. 确保在初始化选项中将injectChanges设置为true 。

    browserSync.init({ proxy:"http://localhost:8888", injectChanges: true }); 

2. 尝试将过滤器传递给stream方法以限制注入哪些更改

browserSync.stream({match: "**/*.css"})