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
laravel-5
rest
freepascal
google-contacts
spring-cloud-contract
outlook-web-addins
wysiwyg
intellij-plugin
ctypes
uisplitviewcontroller
arm-template
propel2
sensu
dspic
samsung-mobile
sumo
osmdroid
emv
vegan
hawtio
pox
openshift-enterprise
oscommerce
bigcartel
discord.net
axis-labels
concrete5-5.7
parent
datalog
excel-interop
resuming-training
lumen-5.3
walmart-electrode
defold
azureportal
rhel6
spring-data-hadoop
crystal-reports-8.5
paas
emoticons
spyne
sql-server-administration
inject
vst
pydio
wcf-ria-services
gameanalytics
pax-web
unsatisfiedlinkerror
dbscan
fps
financial
brackets-shell
persistence.xml
coldfusion-7
insert-into
pyopengl
cpu-cores
git-checkout
httpie
custom-url
robocode
candidate-key
grunt-contrib-concat
ogr2ogr
phpdocx
late-static-binding
edit-in-place
bsod
pyjade
facebook-chat
sim900
installshield-2009
visual-studio-2003
surveyor-gem
shortcuts
database-permissions
magickwand
icsharpcode
viewdidload
nemerle
surf
authenticode
server-error
hadoop-plugins
chdatastructures
openvg
plinq
outlook-form
standardized
data-execution-prevention

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