CODEWITHSUNDEEP
node.jssassgulpgulp-browser-sync
ulumi
ulumi

Reputation: 63

browser sync reloading injecting works, but reloads after

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']);

Upvotes: 0

Views: 1117

Answers (1)

thewildandy
thewildandy

Reputation: 328

Adjust the glob for the sass files you want to compile to only match .scss (or .sass) files:

e.g. in your code example change assets/scss/** to assets/scss/**/*.scss.

A broad glob can result in unexpected files (typically source maps) being passed down the pipeline and Browsersync's default behaviour when it encounters modified files that can't be streamed is to reload the page, hence you get a successful injection for the CSS and then a hard reload for some files you probably didn't expect / don't care about.

Upvotes: 2

Related Questions