CODEWITHSUNDEEP
browser-syncgulp-sassgulp-browser-sync
Jason Yarrington
Jason Yarrington

Reputation: 71

Gulp and Browsersync injecting CSS but causing a full reload

I am trying to configure Gulp and Browsersync to inject CSS changes without a reload. The attached Gulpfile.js is calling .pipe(browserSync.stream()) after the SASS task. We see it inject, but then calls a full reload.

/**
 * Gulpfile
 */
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var notify = require('gulp-notify');
var browserSync = require('browser-sync');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var fs = require("fs");
var exec = require('child_process').exec;
var config = require("./config");
var appDir = 'web'

/**
 * If config.js exists, load that config for overriding certain values below.
 */
function loadConfig() {
    if (fs.existsSync(__dirname + "/./config.js")) {
        config = {};
        config = require("./config");
    }

    return config;
}

loadConfig();

/*
* This task generates CSS from all SCSS files and compresses them down.
*/
gulp.task('sass', function () {
    return gulp.src(appDir + '/anonymous/scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            noCache: true,
            outputStyle: "compressed",
            lineNumbers: false,
            loadPath: appDir + '/anonymous/css/*',
            sourceMap: true
        })).on('error', function(error) {
            gutil.log(error);
            this.emit('end');
        })
        .pipe(sourcemaps.write(appDir + '/anonymous/maps'))
        .pipe(gulp.dest(appDir + '/anonymous/css'))
        .pipe(browserSync.stream())
        .pipe(notify({
            title: "SASS Compiled",
            message: "All SASS files have been recompiled to CSS.",
            onLast: true
        }))
        ;
});


/**
 * Define a task to spawn Browser Sync.
 * Options are defaulted, but can be overridden within your config.js file.
 */
gulp.task('browser-sync', function() {
    browserSync.init({
        port: config.browserSync.port,
        proxy: config.browserSync.hostname,
        open: config.browserSync.openAutomatically,
        injectChanges: config.browserSync.injectChanges
    });
});

/**
 * Defines the watcher task.
 */
gulp.task('watch', function() {
    // watch scss for changes
    gulp.watch([
        appDir + '/anonymous/scss/**/*.scss',
        appDir + '/secure/components/**/*.scss'
    ], ['sass']);

});

gulp.task('default', [
    'sass',
    'watch',
    'browser-sync'
]);

Here is the config.js that is referenced in the browsersync config.

module.exports = {
  browserSync: {
    hostname: "http://192.168.50.4:9080/site/secure",
    port: 3000,
    openAutomatically: true,
    reloadDelay: 50,
    injectChanges: true,
  },
};

Upvotes: 2

Views: 558

Answers (1)

Jason Yarrington
Jason Yarrington

Reputation: 71

I figured out the answer to my own question.

There is a source map being generated and browsersync is watching the sourcemap folder and triggering a full refresh when the sourcemap is regenerated. Removing these lines stops the full refresh on the SASS task.

    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write(appDir + '/anonymous/maps'))

Reference

https://github.com/BrowserSync/browser-sync/issues/235

Upvotes: 0

Related Questions