gulp-livereload recharger CSS sans actualiser la page entière

Question

Je travaille avec le serveur distant, et après tout changement de fichier déployé sur le serveur via gulp-sftp. Je travaille également avec SASS, et j'ai la tâche de le compiler.

Compile tâche

gulp.task('compile_css',function(){ 
gulp.src('css/**/*.scss') 

    .pipe(compass({ 
     config_file: 'config.rb', 
     css: 'css', 
     sass: 'css' 
    })) 

    .pipe(gulp.dest('css')) 
    .pipe(sftp(sftp_config)); 
}); 

Watcher

gulp.task('watch', function(){ 
livereload.listen();  
gulp.watch('css/**/*.scss', ['compile_css']); 
gulp.watch('css/*.css*').on('change', function(file){ 
    gulp.src(file.path) 
     .pipe(wait(1000)) 
     .pipe(livereload()); 
}); 
}); 

Et maintenant, si je change tout fichier .scss dans la première mise à jour du navigateur que stylesheet sans reload pare (charge uniquement une nouvelle version de style.css) mais ensuite rafraîchir la page entière, et c'est agaçant. Pouvez-vous s'il vous plaît donner des conseils pour l'éviter?

p.s. en utilisant le logiciel LiveReload fonctionne parfaitement dans ce cas

Answer 1

Veuillez essayer ce qui suit dans votre tâche watch.

S'il vous plaît noter que je ne peux pas tester l'extrait en ce moment, mais je pense que cela pourrait vous aider, selon gulp-livereload docs:

gulp.task('watch', function(){ 
    livereload.listen(); 
    gulp.watch('css/**/*.scss', ['compile_css']); 
    gulp.watch('css/*.css', function(file){ 
     livereload.changed(file) 
    }); 
}); 

Astuce: Avez-vous pensé à utiliser Browsersync à la place?