How can i make browsersync work with my gulp4 config?

Question

I'm trying to include browsersync functionality to my existing gulpfile.js, but i cannot make it work. Browsed too many gulpfile.js examples now i got more confused. I'm new to gulp and can't find my way around. Any help appreciated.

This is my gulpfile.js:

import gulp from 'gulp'
//import browserSync from 'browser-sync'
import imagemin from 'gulp-imagemin'
import fileinclude from 'gulp-file-include'
import dartSass from 'sass'
import gulpSass from 'gulp-sass'
const sass = gulpSass(dartSass)
const browserSync = require('browser-sync').create();

function browsersync() {
  browserSync.init({
    server: {
      baseDir: 'dist/',
    },
    ghostMode: { clicks: false },
    notify: false,
    online: true,
  })
}

// Optimize images
gulp.task('imagemin', async () => {
  gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/assets/img'))
})

// File includes
gulp.task('fileinclude', async () => {
  gulp.src(['src/views/**/*.html', '!src/views/**/_*.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('dist'));
});

// Compile Sass
gulp.task('sass', async () => {
  gulp.src('src/sass/**/*.scss', { sourcemaps: true })
    .pipe(sass.sync().on('error', sass.logError)) // scss to css
    .pipe(gulp.dest('dist/assets/css', { sourcemaps: '../sourcemaps/' }))
    .pipe(browserSync.stream())
})

// Test
gulp.task('default', async () => {
  return console.log('Gulp is running...')
}) 

// GULP WATCH
gulp.task('watch', async () => {
  gulp.watch('src/sass/**/*.scss', gulp.series('sass'))
  gulp.watch('src/views/**/*.html', gulp.series('fileinclude')).on('change', browserSync.reload)
  //gulp.watch('src/images/*', ['imagemin'])
})

Answer 1

Nevermind, i have found the solution:

const { src, dest, watch, series } = require('gulp')
const cssnano = require('cssnano')
const sass = require('gulp-sass')(require('sass'))
const postcss = require('gulp-postcss')
const terser = require('gulp-terser')
const fileinclude = require('gulp-file-include')
const browsersync = require('browser-sync').create()

// File Includes
function fileincludeTask() {
  return src(['src/views/**/*.html', '!src/views/**/_*.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(dest('dist'))
}

// Sass Task
function scssTask() {
  return src('src/sass/styles.scss', { sourcemaps: true })
    .pipe(sass())
    .pipe(postcss([cssnano()]))
    .pipe(dest('dist/assets/styles', { sourcemaps: '.' }))
}

// Javascript Task
function jsTask() {
  return src('src/js/script.js', { sourcemaps: true })
    .pipe(terser())
    .pipe(dest('dist/assets/scripts', { sourcemaps: '.' }))
}

// Browsersync Tasks
function browsersyncServe(done) {
  browsersync.init({
    server: {
      baseDir: 'dist'
    }
  })
  done()
}

function browsersyncReload(done) {
  browsersync.reload()
  done()
}

// Watch Task
function watchTask() {
  watch('dist/*.html', browsersyncReload)
  watch(['src/sass/**/*.scss', 'src/js/**/*.js', 'src/views/**/*.html', '!src/views/**/_*.html'], series(scssTask, jsTask, fileincludeTask, browsersyncReload))
}

// Default Gulp Task
exports.default = series(
  scssTask,
  jsTask,
  fileincludeTask,
  browsersyncServe,
  watchTask
)