How to set up hot reload in browserSync?

Question

gulp.js

Good afternoon, who knows if it is possible to set up hot reload css in browserSync?
At the moment, when saving, the watcher monitors the stylus, it compiles and reloads the page in the browser, I used gulp-server and live-reload before, and when saving css, the browser did not reload the page, it only updated css, when using browserSync, it constantly refreshes the page when saving css is very annoying.

Answer 1

my task looks like this, and the styles change on the fly:

// ...
gulp.task('serve', ['...', 'styles', '...'], function () {
  browserSync.init({
      server: {
        baseDir: './dist/'
      },
      browser: 'google chrome',
      notify: false
  });
    
  gulp.watch('src/styles/**/*.styl', ['styles']);
});

// ...

gulp.task('styles', function () {
  gulp.src('src/styles/main.styl')
    .pipe(plumber())
    .pipe(stylus())
    .pipe(autoprefixer({ browsers: ['last 3 version'] }))
    .pipe(browserSync.stream())
    .pipe(gulp.dest('dist/styles'));
});
// ...

(excess removed under ellipsis)