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

Connect-gzip-static doesn't pick up html in firefox
Is it safe to include localhost into your connect-src for CSP?
Quit Browser-sync from terminal
lite-serverbs-config.js: middleware and array of folders
Make BrowserSync use the real https URL
Can we use browser sync on external url
How to replace .html with forward slash in BrowserSync?
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

Categories

HOME
windows
cygwin
facebook-oauth
gdb
awk
polymer
c++11
merge
zend-framework
interface
fftw
obfuscation
grafana
pyqt4
iis-6
data-visualization
elasticsearch-5
computer-science
g++
mod-security
php-5.6
onedrive-api
atlassian
3nf
azure-powershell
event-sourcing
easyphp
production
nodemcu
bourbon
windows-xp
ag
guzzle
pimcore
jquery-callback
interbase
entity-relationship-model
firebase-analytics
android-things
iis-express
scrollview
dsx-desktop
github3.py
instantiation
keras-layer
installscript
lubridate
hivemq
imagenet
metaprogramming
signals-slots
postgresql-8.4
lpsolve
photos
vaadin-charts
automapper-5
wcftestclient
twilio-click-to-call
tinkerpop
static-cast
subnet
universal-analytics
baidu
django-1.10
bootstrap-tags-input
omxplayer
hadoop-2.7.2
microstation
xdoclet
simevents
observablecollection
jtwig
php-socket
fuzzywuzzy
concurrentmodification
dynatree
django-urls
.bash-profile
entity-framework-4.3
android-broadcast
diff3
umlgraph
broadband
grouping-sets
webfinger
verold
codeplex
cfcache
rolify
scmmanager
subgraph
paginator
appjs
workflow-services
landscape-portrait
update-statement
xui
collectionviewsource
timertask
data-mapping
lobo-cobra
appliance
netbeans6.1

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