browserSync + gulp

I am planning a project in MEAN and I can hardly find the angle part.

I want to do everything from scratch to learn about gulp and its functionality as well as other tools, however, I ran into the following problem:

When I use the browser-sync it just does not work. I open the browser as I want and if I open the correct files, but does not update the browser when I ask.

Structure of folders and files

gulpfile.babel.js

import gulp         from "gulp";
import browserify   from "browserify";
import source       from "vinyl-source-stream";
import htmlmin      from "gulp-htmlmin";
import streamify    from "gulp-streamify";
import uglify       from "gulp-uglify";
let browserSync = require("browser-sync").create();

gulp.task("default", ["serve"]);

gulp.task("move-html", () => {
  return gulp.src("index.html")
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest("dist"));
});

gulp.task("transpile", ["move-html"], () => {
  return browserify("src/app.js")
    .transform("babelify")
    .bundle()
    .on("error", function(error){
      console.error( "\nError: ", error.message, "\n");
      this.emit("end");
    }).pipe(source("bundle.js"))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest("dist"));
});

gulp.task("reload", ["transpile"], () => {
  browserSync.reload();
  done();
});

gulp.task("serve", () => {
  browserSync.init({
    server: {
      baseDir: "dist"
    }
  });
  gulp.watch("client/**/*", ["reload"]);
});

I have reviewed and followed several tutorials but none of them work for me, when I execute the task serve command (which appears in my gulpfile) the following output appears:

However, when I update my files, the browser reload is not done.