How to make page reload with browsersync more logical?

Question

gulp.js

At the moment, I came up with a crutch in which updating the styles in the browser occurs only after saving the file with the styles and then saving the html file to which the file with all the collected styles is connected.
The actual task in gulpfile.js

gulp.task('serve', function() {
    browserSync.init({
        port: 3000,
        notify: false,
        logPrefix: 'Project',
        server: {
            baseDir: './src'
        },
        files:["./src/index.html", "./src/style/сss/app.css"] //обновление при изменении конкретных файлов 
    });
    gulp.watch('./src/style/sass/*.scss', ['sass']); //смотрит за изменениями в кастомных файлах со стилями 
});

Tasksass

gulp.task('sass', function () {
  gulp.src(path.src.style.sass + "/app.scss") 
        .pipe(sass())
        .pipe(gulp.dest(path.src.style.css));
});

The task sasscompiles everything and throws it into app.css, but anyway, in order for the changes to be displayed in the browser, you need to save something in custom styles (works out gulp.watch('./src/style/sass/*.scss', ['sass']);) and then save the html itself, in which app.css. I would like this to happen in one click, that is, immediately after saving it in a file with styles, but I can’t figure out how to do it normally.

Answer 1

Ready working solution https://www.browsersync.io/docs/gulp
Searched inattentively, sorry.