Gulp watch not working with gulp-imagemin and browsersync

this is my gulp file. Image compression works when I give the “gulp mini” command in the terminal. but when I give the “gulp watch” command or delete or add an image file, it doesn’t detect any changes. Image compression doesn’t work. How can I make this dynamic so that whenever I give the “gulp watch” command, it automatically compresses all the images and also detected the change and compress images? Here is the code:

const browserSync = require("browser-sync");
const gulp = require("gulp");
const broswerSync = require("browser-sync");
const imagemin = require("gulp-imagemin");
const pngquant = require("imagemin-pngquant");
const mozjpeg = require("imagemin-mozjpeg");

function mini() {
  return gulp
    .src("./image/*")
    .pipe(
      imagemin([pngquant({ quality: [0.5, 0.5] }), mozjpeg({ quality: 50 })])
    )
    .pipe(gulp.dest("./build/"));
}

function watch() {
  browserSync.init({
    server: {
      baseDir: "./",
    },
  });
  gulp.watch("./image/**/*", mini);
}

exports.mini = mini;
exports.watch = watch;