В Gulp 4 + browser sync не работает автообновление.Как исправить?

Question

[Алексей Павлютенков]

Обучаюсь работе с gulp 4.Все отлично запускается,но он не обновляет страницу,при изменениях в файле
html.Только если f5 тыкать.Все уже перерыл,и код перепроверил.
Код брал с аналогичного вопроса и переделал под себя пути файлов.
Не работает Gulp, выдает ошибку?
Ниже код написанный в файле gulpfile.js
Только при таком коде смог запустить,без выдачи ошибок в командной строке
Подскажите пожалуйста, где ошибка в коде или в чем причина что browser sync не работает с gulp-ом?

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

gulp.task('serve', function(done) {

    browserSync.init({
        server: "src/"
    });

    gulp.watch("scr/sass/*.sass", gulp.parallel('sass'));
    gulp.watch("scr/*.html").on('change', () => {browserSync.reload();
      done();
    });
  
    done();
});

gulp.task('sass', function(done) {
    gulp.src("scr/sass/*.sass")
        .pipe(sass())
        .pipe(gulp.dest("scr/css"))
        .pipe(browserSync.stream());

    done();
});

gulp.task('default', gulp.parallel('serve', 'sass'));

Answer 1

[Алексей Павлютенков]

много разных вариантов перепробовал,в итоге решил вопрос с автообновлением,написав еще один таск для gulp под html и немного подправив код.
Вот рабочий вариант кода,где компилируется sass в css и работает
browser sync:

var gulp 		= require('gulp'),
	sass        = require('gulp-sass'),
	browserSync = require('browser-sync');

gulp.task('sass', function() {
	return gulp.src('src/sass/main.sass')
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('src/css'))
		.pipe(browserSync.reload({stream: true}))
	}); 

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

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "src/"
        }
    });
});

gulp.task ('watch', function() {
	gulp.watch('src/sass/**/*.sass', gulp.parallel('sass'))
	gulp.watch('src/*.html', gulp.parallel('html'))
	});

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

Comments

[Александр Викторович]

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task('sass', function() {
    return gulp.src('./src/sass/main.sass')
        .pipe(sass({ outputStyle: 'expanded' }))
        .pipe(gulp.dest('./build/css/'));
});

gulp.task('html', function() {
    return gulp.src('./src/**/*.html')
        .pipe(gulp.dest('./build/'));
});

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './build/',
        },
    });
    browserSync.watch('./build/**/*.*').on('change', browserSync.reload);
});

gulp.task('watch', function() {
    gulp.watch('./src/sass/**/*.sass', gulp.series('sass'));
    gulp.watch('./src/**/*.html', gulp.series('html'));
});

gulp.task('default', gulp.series('html', 'sass'));

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

Answer 2

[SinGlEBW]

gulp.watch('src/*.html', gulp.parallel('html'))
Заменяется на

server: {
            baseDir: "src/",
            index: 'index.html',
        },
watch: true

а ещё вот это

function gluingJS() {
  let jsFile = fs.readdirSync('src/js/dev');
  return (
    browserify({
      entries: jsFile,
      basedir: "src/js/dev",
      debug: true,
    })
    .transform(babelify, {
      presets: ['@babel/preset-env'],
    })
    .bundle()
    .pipe(source('bundle.min.js'))
    .pipe(buffer())//uglify не заводиться без vinyl-buffer
    .pipe(sourcemaps.init({
      loadMaps: true,
    }))
    .pipe(uglify())//удалил карты, теперь debug: true бесполезен
    .pipe(sourcemaps.write('./sourcemap'))
    .pipe(dest('src/js'))
    .pipe(bs.reload({stream: true}))
  )
}

заменяется этим

function gluingJS() {
  let jsFile = fs.readdirSync('src/js/dev');
  return (
    browserify({
      entries: jsFile,
      basedir: "src/js/dev",
      debug: true,
    })
    .transform(babelify, {
      presets: ['@babel/preset-env'],
    })
    .bundle((err, buffer) => {
      let event = new EventEmitter();
      if (err) {
        event.emit('error',err)
      }
      else {
        let data = minify(buffer.toString(), {}).code;//uglifu-js
        fs.createWriteStream('./src/js/bundle.min.js').write(data)
        bs.reload()
      } 
    })
  )
}