browser-sync


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,
},
};
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

Related Links

Error during instillation of browser sync
When using browser-sync,why is the browser saying cannot get, while everything seems fine
How to sync the actions performed on webpage using Browsersync?
lite-server, BrowserSync: setting other URL path than /
Gulp and Browsersync injecting CSS but causing a full reload
Browser-sync - serve “node_modules” out of “src” directory
[browser-sync]browser-sync proxy can't connect to Rails Application
Browserstack not serving index.html by default
whatever i do i can't access the external URL for the site or UI
How do I kill browserSync before creating it?
Unable to install browser-sync on windows 7
browser-sync proxy fails to connect
What's the equivalent bs-config.js (Browsersync) of this command?
How to quit the browser-sync server, or how to know the running server pid
browsersync not working (note: not using gulp)
Using browsersync with gulp/nodemon

Categories

HOME
notepad++
scikit-learn
deep-learning
apache-flink
jmeter
angular-formly
owl-carousel
nuget
seo
google-cloud-functions
nsbundle
cakephp-3.4
tail
onclick
iis-6
banner
vert.x
mql5
ibeacon-android
selenium-ide
eip
symbol
mvc-mini-profiler
easyphp
video-editing
jersey-1.0
apache2.4
articulate-storyline
pimcore
hta
flask-sqlalchemy
xcode-ui-testing
google-cloud-print
progress-bar
sql-server-2000
wacom
android-gridview
github3.py
indy10
arduino-ide
zoomify
ideascript
sessionstorage
connection-pool
health-monitoring
demo
kill
resolution
watchface
android-ibeacon
dbnull
movilizer
print-css
logback-groovy
congestion-control
avcapturedevice
show-hide
stylecop
pom.xml
openrasta
user-defined-fields
tf
openblas
google-cse
stdmap
py2neo
ampps
stax
file-uri
windows-azure-queues
ng-grid
angular-ui-typeahead
nss
phpwebsocket
asyncdisplaykit
libvlc
vigenere
zen-cart
evolus-pencil
viola-jones
amiga
alloy-ui
google-refine
umlgraph
mmwormhole
gamekit
punycode
create.js
lnk
multiautocompletetextview
android-usb
scrypt
rolify
flex++
kaleidoscope
pagedown
wp7test
windows-98
preload
resource-management
wimax
cakephp-1.2
listitem
cgimage
hibernateexception
listactivity
cgbitmapcontextcreate
quotation-marks
msr
tmx
django-paypal
non-clustered-index
drupal-fivestar
ajax-polling
interop-domino
contentpresenter
image-capture

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App