Gulp Liveload lädt die gesamte Seite neu, wenn nur CSS geändert wurde

Question

Ich habe Liveload zu meiner Gulp Aufgabe hinzugefügt. Es funktioniert, außer wenn ich eine CSS-Datei bearbeite die gesamte Seite aktualisiert wird, nicht nur die Seiten 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 Ich habe versucht, den folgenden Code aus dem Link unten, aber es tut das gleiche. 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"]); 
}); 

Gleiches Verhalten von dieser: 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); 
}); 

habe ich versucht, die folgenden, aber wenn ich auf dem Live-Reload-Browser versuchen und drehen Plugin es sagt, es ist nicht die Live-Reload-Server finden. 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); 
    })); 
}); 

Answer 1

Sie benötigen livereload.changed (Dateien) rufen, wenn Änderung geschieht. Um dies zu tun, siehe Schluckuhr-Dok.

Answer 2

Ich verbrachte ein paar Stunden in dieser letzten Nacht und stieß auf diese: https://github.com/vohof/gulp-livereload/issues/93.

Sieht aus wie es wegen Ihrer Quellkarten ist. gulp-livereload versucht, schlau zu sein, und lädt die CSS nur neu, wenn nur CSS-Änderungen vorhanden sind. Andernfalls wird die gesamte Seite neu geladen, da sie denkt, dass sich mehr Dateien geändert haben.

So filtern Sie nur Ihren Glob auf nur CSS, bevor Sie die livereload() Funktion aufrufen.

So etwas wie dies könnte helfen:

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()); 
});