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.
You need to add add/install gulp-watch
... i dont see it in your package.json
. To add it try:
npm install gulp-watch
or
yarn add gulp-watch