gulp-livereload reload CSS without refresh entire page

Question

I'm working with remote server, and after any file changes it deployed to server via gulp-sftp. Also im working with SASS, and have task to compile it.

Compile task

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

And now, if i change any .scss file in first browser update only stylesheet without pare reload (load only new version of style.css) but then refresh entire page, and its annoying. Can yu please give any advice how to avoid it?

p.s. using LiveReload software working perfect in this case

Answer 1

Please try the following in your watch task.

Please note that I cannot test the snippet right now, but I think it could help you out, according to gulp-livereload docs:

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

Tip: Have you considered using Browsersync instead?