How to update browser-sync every time files change?

Question

gulp.js

At the first edits and after I save the file - browser-sync updates the server, but then I have to stop and restart gulp, which slows down the work. I would be grateful for your help, thanks

const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')

gulp.task('sass', () => {
    gulp.src('app/styles/sass/**/*.sass')
        .pipe(sass({ outputStyle: 'expanded'}))
        .pipe(gulp.dest('app/styles/css'))
        .pipe(browserSync.reload({stream: true}))
})

gulp.task('html', () => {
    gulp.src('app/*.html')
    .pipe(browserSync.reload({stream: true}))
})

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: 'app/'
        }
    })
})


gulp.task('watch', () => {
    gulp.watch('app/styles/sass/**/*.sass', gulp.parallel('sass'))
    gulp.watch('app/*.html', gulp.parallel('html'))
})

gulp.task('default', gulp.parallel('browser-sync', 'watch'))

Answer 1

one.

const browserSync = require('browser-sync').create();

https://browsersync.io/docs/gulp
2. https://gulpjs.com/docs/en/getting-started/async-c... - you need to return stream in tasks return gulp.src...or call callback at the end
3. what does the html task do you? if you need to track changes in html and reload the page, then

gulp.watch("app/*.html").on("change", browserSync.reload);

in watch instead of html task.

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

gulp.task('sass', () => {
    return gulp.src('app/styles/sass/**/*.sass')
        .pipe(sass({ outputStyle: 'expanded'}))
        .pipe(gulp.dest('app/styles/css'))
        .pipe(browserSync.stream());
});

gulp.task('browser-sync', (cb) => {
    browserSync.init({
        server: {
            baseDir: 'app/'
        }
    });
    cb();
});

gulp.task('watch', (cb) => {
    gulp.watch('app/styles/sass/**/*.sass', gulp.parallel('sass'));
    gulp.watch('app/*.html').on('change', browserSync.reload);
    cb();
});

gulp.task('default', gulp.parallel('browser-sync', 'watch'));