How to connect correctly Browsersync to the finished gulipfile?

Question

gulp.js

Please help to connect Browsersync normally to the already prepared file, so that the browser also has to be restarted.

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  cleanCSS = require('gulp-clean-css'),
  pug = require('gulp-pug'),
  concat = require('gulp-concat'),
  uglyfly = require('gulp-uglyfly'),
  imagemin = require('gulp-imagemin');

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

gulp.task('sass',function() {
  return gulp.src(['./src/sass/**/*.sass','sass/**/*.scss'])
    .pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(cleanCSS())
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('html', function buildHTML(){
  return gulp.src('./src/pug/**/*.pug')
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest('./dist/html'));
});

gulp.task('js', function(){
  return gulp.src(['./src/js/jquery-3.2.1.min.js', './src/js/bundle.js'])
    .pipe(concat('bundle.js'))
    .pipe(uglyfly())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('imagemin', function () {
  return gulp.src('./src/images/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/images'));
});

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

gulp.task('watch', function(){
  gulp.watch(['./src/sass/**/*.sass','./src/sass/**/*.scss'],['sass']);
  gulp.watch(['./src/pug/**/*.pug'],['html']);
  gulp.watch(['./src/js/*.js'],['js']);
  gulp.watch(['./src/assets/**/*'],['assets']);
  //gulp.watch(['./src/images/**/*'],['imagemin']);
});

gulp.task('default', ['sass', 'html', 'js', 'assets', 'watch']);