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

【问题标题】：Gulp sass and browsersync reloading browser instead of injecting cssGulp sass 和 browsersync 重新加载浏览器而不是注入 css
【发布时间】：2016-07-14 13:24:00
【问题描述】：

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

不确定何时更改，但它过去只是注入新的 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，因为有人告诉我地图文件正在触发重新加载。不确定我是否真的需要这样做，因为大多数在线示例都与我在这里的示例一样...

【问题讨论】：

在你的 sass 函数 .pipe(browserSync.stream()); 中设置页面重新加载。您可以在此处更改选项browsersync.io/docs/gulp#gulp-manual-reload
好吧，我确实希望它注入新的 css。这就是“Stream”应该做的事情，无需完全重新加载。

标签： javascript css gulp gulp-sass gulp-browser-sync

【解决方案1】：

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

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

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

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

【讨论】：