browser sync reloading injecting works, but reloads after.

[ulumi]

it seems there is something im missing - Im just trying to get the css injection working on this project.

The server proxy works The file watcher too The injection works, but the page always reloads half a second after...

Im on Mac osx 10.11.6 (15G1108) Node v4.1.1

here is my gulpfile:

` var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; var sass = require('gulp-sass');

var plumber = require('gulp-plumber'); var notify = require("gulp-notify");

var src = { scss: 'assets/scss/*', css: 'assets/css/', html: 'app/.html' };

gulp.task('serve', ['sass'], function() {

browserSync.init({
    proxy: "intouch.local",
    open: false,
    reloadOnRestart: false,
    injectChanges: true,
});

gulp.watch(src.scss, ['sass']);

});

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

var onError = function(err) {
        notify.onError({
                    title:    "Gulp",
                    subtitle: "Failure!",
                    message:  "Error: <%= error.message %>",
                    sound:    "Beep"
                })(err);

        this.emit('end');
    };

return gulp.src(src.scss)
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass())
    .pipe(gulp.dest(src.css))
    // NOTE: i've tried with all of these lines, all do the same...
    // .pipe(reload({stream: true}))
    // .pipe(browserSync.stream())
    .pipe(browserSync.reload({
          stream: true
        }))
    .pipe(notify({
       title: 'Gulp',
       subtitle: 'success',
       message: 'Sass task',
       sound: "Pop"
    }));

});

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

`

[Yimiprod]

Someone have an answer? I'm in the same situation.

[donomron]

I faced the same issue and found out that the problem lies in generating sourcemaps. Check this answer Even though I'm adjusting the glob to match only .scss files, still generating sourcemaps forces the browser to reload after injecting css This is my sass task:

gulp.task('sass',function(){
    gulp.src('./src/css/main.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle:'compressed'}))
            .on('error',gutil.log)
        .pipe(postcss([autoprefixer({
            browsers: ['> 5%','> 2% in IR','ie >= 9']
        })]))
        .pipe(sourcemaps.write('./template/maps/css/'))
        .pipe(gulp.dest('./template/css'))
        .pipe(gulpif(autoreload,browserSync.stream()));
});

And I'm watching all .scss files in my default task:

gulp.watch('src/css/**/*.scss',['sass']);

When I comment the sourcemaps generating lines I have css injecting nice and clean, yet I did not find a way to have both

[dangreen]

https://www.browsersync.io/docs/gulp#gulp-sass-maps

.pipe(browserSync.stream({match: '**/*.css'}));

[donomron]

Found a way to fix my problem! You have to "Provide a filter to stop unwanted files from being reloaded". Check this documentation and go to stream() method. My corrected version:

.pipe(gulpif(autoreload,browserSync.stream({match:"**/*.css"})));