Gulp livereload ricarica l'intera pagina quando è stato modificato solo il CSS

Question

Ive ha aggiunto livereload al mio task Gulp. Funziona tranne quando modifico un file CSS, l'intera pagina viene aggiornata, non solo le pagine 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()); 
}); 

Aggiornamento Ive ha provato il seguente codice dal collegamento seguente ma fa la stessa cosa. 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"]); 
}); 

Stesso comportamento da questa: 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); 
}); 

ho provato quanto segue ma quando provo e accendo il browser ricarica plug-in diretta si dice che non riesce a trovare il server di ricarica dal vivo. 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

è necessario chiamare livereload.changed (file) quando il cambiamento avviene. Per farlo vedi gulp-watch doc.

watch('**/*.js', function (files) { 
    livereload.changed(files) 
}); 

Answer 2

ho trascorso un paio d'ore in questa ultima notte e sono imbattuto in questo: https://github.com/vohof/gulp-livereload/issues/93.

Sembra che sia a causa delle tue scorte. gulp-livereload cerca di essere intelligente e ricarica solo il css se ci sono solo modifiche css. Altrimenti ricarica l'intera pagina perché pensa che ci siano più file modificati.

Quindi basta filtrare la glob fino a solo css prima di chiamare la funzione livereload().

Quindi, qualcosa di simile potrebbe aiutare:

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