AngularJS with Gulp tasks: browserSync is not working

My Project Structure:

this is my gulpfile.js. When I was trying to change .css/.html/.js, until if I refresh, latest changes are not reflecting and sometimes even when I refresh also latest code changes are not reflecting. please help is my gulpfile is correct ? and where to specify in gulpfile to pick latest code changes ?

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

var devMode = false;

gulp.task('css', function() {
    return gulp.src('./src/**/*.css')
        .pipe(gulp.dest('./dist/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


gulp.task('js', function() {
    return gulp.src('./src/**/*.js')
        .pipe(gulp.dest('./dist/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


gulp.task('html', function() {
    return gulp.src('./src/**/*.html')
        .pipe(gulp.dest('./dist/'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


gulp.task("build",
    gulp.series(gulp.parallel("css", "js", "html"), function(done) {
        done();
    })
);

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        ui: false,
        open: 'external',
        host: 'localhost',
        proxy: 'http://localhost/myapp',
        port: 8080
    });
});

gulp.task('start', gulp.series(['build','browser-sync']),function() {
    devMode = true;
    
    gulp.watch(['./src/**/*.css'], ['css']);
    gulp.watch(['./src/**/*.js'], ['js']);
    gulp.watch(['./src/**/*.html'], ['html']);
});