Gulp-Error: Cannot find module 'gulp-watch'

I am making a WordPress plugin that uses gulp to control all my assets and when I try to trigger the gulp-watch function it gives me this error:

C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin>gulp watch
Error: Cannot find module 'gulp-watch'
Require stack:
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\gulpfile.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp-
cli\lib\shared\require-or-import.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp-
cli\lib\versioned\^4.0.0\index.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp-
cli\index.js
- C:\xampp\htdocs\testsite\wp-content\plugins\basic-plugin\node_modules\gulp\
bin\gulp.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:1
5)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\xampp\htdocs\testsite\wp-content\plugins\basic-
plugin\gulpfile.js:7:13)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\gulpfile
.js',
    'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp-cli\\lib\\shared\\require-or-import.js',
    'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp-cli\\lib\\versioned\\^4.0.0\\index.js',
    'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp-cli\\index.js',
    'C:\\xampp\\htdocs\\testsite\\wp-content\\plugins\\basic-plugin\\node_mod
ules\\gulp\\bin\\gulp.js'
  ]
}

Although I have added the gulp-watch plugin and saved it in my devDependencies and I also have called it in gulpfile.js using require() method but it still gives the error MODULE NOT FOUND. I have also added my gulpfile.js and package.json file you can see it for yourselves. Here is my package.json file:

{
  "name": "basic-plugin",
  "version": "1.0.0",
  "description": "basic wordpress custom plugin",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "js",
    "gulp",
    "wordpress",
    "plugin"
  ],
  "author": "Arslan Abbasi <[email protected]>",
  "license": "GPL-3.0",
  "devDependencies": {
    "@babel/preset-env": "^7.13.8",
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babelify": "^10.0.0",
    "browser-sync": "^2.18.13",
    "browserify-shim": "^3.8.14",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-concat": "^2.5.2",
    "gulp-if": "^3.0.0",
    "gulp-notify": "^3.0.0",
    "gulp-options": "^1.1.1",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^3.0.0",
    "gulp-uglifycss": "^1.0.9",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^2.0.0"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$"
  }
}

Here is my gulpfile.js:

var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var autoprefixer = require( 'gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var watch = require('gulp-watch');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

var styleSRC = 'src/scss/mstyle.scss';
var styleDIST = './assets/';

var jsSRC = 'src/js/';
var jsScript = 'script.js';

var jsFiles = [jsScript];
var jsDIST = './assets/js/';

var styleWatch = 'src/scss/**/*.scss';
var jsWatch = 'src/js/**/*.js';

gulp.task('style', function(done){
    return gulp.src(styleSRC)
        .pipe(sourcemaps.init())
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'compressed'
        }) )
        .on('error',console.error.bind(console))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(styleDIST));
    done();
});
gulp.task('js', function(done){
    jsFiles.map(function(entry){
        return browserify({entries: [jsSRC+entry]})
            .transform(babelify, {presets:['@babel/env']})
            .bundle()
            .pipe(source(entry))
            .pipe(rename({extname:'.min.js'}))
            .pipe(buffer())
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(uglify())
            .pipe(sourcemaps.write('./'))
            .pipe( gulp.dest( jsDIST) );
    });
    done();
});
gulp.task('default',gulp.series(['style', 'js']));
gulp.task('watch',gulp.series(['default'], function(done){
    gulp.watch(styleWatch,gulp.parallel(['style']));
    gulp.watch(jsWatch,gulp.parallel(['js']));
    done();
}));

Can someone please help me with what to do? I have been struggling with it for hours.