how to add browser-sync in gulp-4 - gulp

Question

//Importing gulp files to variables
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();
// File path variables in my projects folder
const files = {
scsspath:'assets/scss/**/*.scss' ,
jspath:'assets/js/**/*.js'}
//Sass Task
function scssTask(){
return src(files.scsspath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(sourcemaps.write('.'))
.pipe(dest('assets/css'))
.pipe(browsersync.stream());}
//JsTask
function jsTask(){
return src(files.jspath)
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(dest('assets/js')).pipe(browsersync.stream());}
//WatchTask
function watchTask(){
watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}
//DefaultTask
//I don't know how to use browser-sync in gulp-4
exports.default = series(parallel(scssTask,jsTask) , cashBustTask ,
watchTask,browsersync);

Answer 1

Create a separate task for browser-sync. Here's an example of how I've set this up:
const bs = require('browser-sync').create();
// Other inputs used with browser-sync
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass');
function browserSync() {
// Run serveSass function when starting the dev server to make sure the SCSS & dev CSS are the same
serveSass();
bs.init({
// Dev server will run at localhost:8080
port: 8080,
server: {
// I'm using 'src' as my base directory
baseDir: 'src',
},
});
// These watch for changes to files and reload in the browser
watch('src/*.html').on('change', bs.reload);
watch('src/scss/*.scss', serveSass);
watch('src/js/*.js').on('change', bs.reload);
}
// This compiles Sass when running browser-sync and reloads the CSS
function serveSass() {
// My dev Sass files are found in 'src/scss/'
return src('src/scss/*.scss')
.pipe(sass())
// My dev CSS files are found in 'src/css/'
.pipe(dest('src/css))
.pipe(bs.stream());
}
// Then I run 'gulp serve' in the terminal to start browser-sync and my dev server
exports.serve = browserSync;
My full Gulp setup is here if you want more context.

Answer 2

Quick solution:
Add a function to trigger BrowserSync:
function reload(){
browserSync.reload();
}
Modify your watchTask() function to:
function watchTask(){
browserSync.init({
server: { baseDir: "./dist" }
});
gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}
Modify your exports to:
exports.default = watchTask;

Answer 3

I found this guide to upgrade gulp 4, that explains that gulp.series or gulp.parallel needs to be used. Example:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browserSyncReload', gulp.series( function(done) {
browserSync.reload();
done();
}));
gulp.task('default', gulp.series( function(done) {
browserSync.init({
notify: false,
proxy: "127.0.0.1:5003/nl"
});
gulp.watch("app/templates/**/*.", gulp.series('browserSyncReload'));
gulp.watch("app/static/**/*.*", gulp.series('browserSyncReload'));
done();
}));