Блог

У меня возникла проблема, из-за которой BrowserSync не перезагружается при изменении. Из того, что я могу сказать, он зависает при перезагрузке, когда было внесено изменение. Изменения отображаются, когда я обновляю браузер вручную. Вот мой исходный код для моего gulpfile в качестве ссылки

     const {src, dest, watch, series, parallel} = require('gulp')
    const autoprefixer = require('autoprefixer')
    const cssnano = require('cssnano')
    const concat = require('gulp-concat')
    const postcss = require('gulp-postcss')
    const replace = require('gulp-replace')
    const sass = require('gulp-sass')
    const sourcemaps = require('gulp-sourcemaps')
    const uglify = require('gulp-uglify')
    const browsersync = require('browser-sync').create()

    const files = {
        scssPath: 'app/scss/**/*.scss',
        jsPath: 'app/js/**/*.js',
        htmlPath: 'app/index.html'
    }

    const scssTask = () => {
        return src(files.scssPath)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .pipe(postcss([ autoprefixer(), cssnano() ]))
            .pipe(sourcemaps.write('.'))
            .pipe(dest('dist'))
            .pipe(browsersync.stream({stream: 'true'}))
    }

    const jsTask = () => {
        return src(files.jsPath)
            .pipe(uglify())
            .pipe(concat('main.js'))
            .pipe(dest('dist'))
            .pipe(browsersync.stream({stream: 'true'}))
    }

    const serverRefresh = (done) => {
        browsersync.reload()
        done()
    }

    const serve = (done) => {
        browsersync.init({
            server:{
                baseDir: './'
            }
        })
        done()
    }

    const watchTask = () => {
        watch([files.scssPath, files.jsPath], series(parallel(scssTask, jsTask), serverRefresh))
    }

    exports.default = series(parallel(scssTask, jsTask), serve, watchTask)
  

Пожалуйста, дайте мне знать, где я могу это исправить, поскольку я пробовал разные подходы и пока не нашел решения.