How to reload only the changed part of the code in browsersync, and not refresh the entire page?

Question

JavaScript

For live coding, I use browsersync (maybe I should use another solution?)
On large projects, I have to wait a very long time until the entire page is refreshed. Is there a way to reload only the changed part of the code? After all, node.js and webkit are still used - I think this bundle can do everything now, but I can’t find how to solve my problem.

Answer 1

If you change html, especially if it is inside php files, then nothing, just update the entire page. If some css/js is changed and you need to update the changes, then add browserSync.stream(). My bootstrap-sass build example in gulp

gulp.task('bootstrap-sass', function() {
  return sass(src.bootstrap.source, {
      style: 'compressed'
    })
      .on('error', sass.logError)
      .pipe(rename(src.bootstrap.dest.name))
      .pipe(notify('File ' + src.bootstrap.dest.folder + '/' + src.bootstrap.dest.name + ' was compiled'))
      .pipe(gulp.dest(src.bootstrap.dest.folder))
      .pipe(browserSync.stream())
});

Answer 2

1) the html document is completely reloaded in any case, only changes cannot be loaded.
2) browsersync is the best solution by far. And it outperforms its competitors.