Как обновлять browser-sync каждый раз изменения файлов?

Question

[embiid]

При первых правках и после того как сохраняю файл - browser-sync обновляет сервер, но потом уже надо останавливать и перезапускать gulp, что замедляет работу. Буду благодарен за помощь, спасибо1

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

[xdevelx]

1.

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

https://browsersync.io/docs/gulp

2. https://gulpjs.com/docs/en/getting-started/async-c... - нужно в задачах возвращать stream return gulp.src... или вызывать в конце callback

3. что у вас делает таск html? если нужно отслеживать изменения в html и делать reload страницы, то

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

в watch вместо 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'));