gulp-livereload


Gulp livereload reloads the entire page when only CSS has changed


Ive added livereload to my Gulp task. Its working except when I edit a CSS file the entire page is refreshed, not just the pages CSS.
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var sizereport = require('gulp-sizereport');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var run = require('run-sequence');
gulp.task('watch-theme-css', ['theme-css'], function () {
livereload.listen();
watch(themeFiles.sass, batch(function (events, done) {
gulp.start('theme-css', done);
}))
});
var themeFiles = {
sass: [
'mysite/base/sass/*.s+(a|c)ss',
'mysite/content/sass/*.s+(a|c)ss',
'mysite/custom/sass/*.s+(a|c)ss'
],
out: {
css: 'mysite/build'
}
};
gulp.task('theme-css', function () {
return gulp.src(themeFiles.sass)
.pipe(gulpif(env === 'development', sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({
compatibility: 'ie8'
}))
.pipe(gulpif(env === 'dev', sourcemaps.write('.')))
.pipe(gulp.dest(themeFiles.out.css))
.pipe(livereload());
});
Update Ive tried the following code from the link below but it does the same thing. http://www.roelvanlisdonk.nl/?p=4675
gulp.task('watch-theme-css', ['theme-css'], function () {
livereload.listen();
watch(themeFiles.sass, batch(function (events, done) {
gulp.start('theme-css', done);
}), ["reloadCss"]);
});
Same behaviour from this: https://laracasts.com/discuss/channels/tips/proper-way-to-use-livereload-with-laravel-elixir
gulp.task('watch-lr-css', ['theme-css'], function () {
livereload.changed(themeFiles.sass);
});
I tried the following but when I try and turn on the live reload browser plugin it says it cannot find the live reload server.
gulp: how to update the browser without refresh (for css changes only)
gulp.task('watch-theme-css', ['theme-css'], function () {
//livereload.listen();
livereload.changed(themeFiles.sass);
watch(themeFiles.sass, batch(function (events, done) {
gulp.start('theme-css', done);
}));
});
I spent a few hours on this last night and came across this: https://github.com/vohof/gulp-livereload/issues/93.
Looks like it's because of your sourcemaps. gulp-livereload tries to be smart and only reloads the css if there are only css changes. Otherwise it reloads the whole page because it thinks there are more files that changed.
So you just filter your glob down to only css before you call the livereload() function.
So something like this might help:
var filter = require('gulp-filter');
...
gulp.task('theme-css', function () {
return gulp.src(themeFiles.sass)
.pipe(gulpif(env === 'development', sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({
compatibility: 'ie8'
}))
.pipe(gulpif(env === 'dev', sourcemaps.write('.')))
.pipe(gulp.dest(themeFiles.out.css))
// Add filter here
.pipe(filter('**/*.css))
.pipe(livereload());
});
You need to call livereload.changed(files) when change happens. To do that see gulp-watch doc.
watch('**/*.js', function (files) {
livereload.changed(files)
});

Related Links

Gulp livereload reloads the entire page when only CSS has changed

Categories

HOME
visual-studio-2015
cluster-computing
sass
mql4
nlp
itext
scipy
wsdl
antivirus
extract
bibtex
apple-numbers
ios10
internet-explorer-11
netflix-feign
dryioc
cs-cart
viber
multiple-monitors
sql-tuning
google-openid
ms-access-2007
raphael
nmake
autolayout
spring-ws
iup
excel-2013
helper
winscp
outsystems
spring-insight
getline
fabric-digits
rhino
openshift-enterprise
vmd
tic-tac-toe
infusionsoft
wcf-security
cgo
socketscan
exiftool
matlab-cvst
asmx
chown
drawingarea
jenkins-jira-trigger
rollback
windows-95
forerunnerdb
ingres
inject
cleditor
alter
galleriffic
json-schema-validator
gradle-eclipse
shipitjs
image-editing
kendo-combobox
console-redirect
elastix
anythingslider
function-fitting
eyeql
js-cookie
prezto
ubercart
httpie
left-recursion
ogr2ogr
jstat
outline
sthttprequest
system.web
emma
boost-test
onselect
asp.net-mvc-scaffolding
nscolor
ng-pattern
iconv
dwolla
pep8
fieldset
android-contextmenu
nssavepanel
galaxy-tab
posting
gtk2hs
scalaxb
ets
squeel
recordset
hadoop-plugins
linfu
microsoft.ink
msf

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