Gulp sass and browsersync reloading browser instead of injecting css

Question

I am using the latest gulp sass and browsersync. Upon editing and saving a scss file, it compiles and I see the "injecting styles.css" BUT the browser also reloads.

Not sure when this changes, but it used to just inject the new css file without a reload.

My task:

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());
});

Once, I used a filter to pipe only the css file to browsersync, since someone told me the map file was triggering a reload. Not sure if I really need to do that, as most online examples are like what I have here...

In your sass function `.pipe(browserSync.stream());` is what's setting the page to reload. You can change the options here https://www.browsersync.io/docs/gulp#gulp-manual-reload — M1lls, Jul 14 '16 at 15:07
well, i do want it to inject the new css. That's what "Stream" is supposed to do, without a full reload. — Steve, Jul 14 '16 at 15:08

score 0 · Answer 1 · answered Dec 19 '18 at 14:59

Make sure you've set injectChanges to true in your initialization options.

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

Try passing a filter to the stream method to restrict which changes are injected

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

Gulp sass and browsersync reloading browser instead of injecting css

1 Answers1