我正在制作一个WordPress插件，使用gulp来控制我所有的资产，当我试图触发gulp-watch功能时，它给了我这个错误:
C:xampphtdocstestsitewp-contentpluginsbasic-plugin>gulp watch
Error: Cannot find module 'gulp-watch'
Require stack:
- C:xampphtdocstestsitewp-contentpluginsbasic-plugingulpfile.js
- C:xampphtdocstestsitewp-contentpluginsbasic-pluginnode_modulesgulp-
clilibsharedrequire-or-import.js
- C:xampphtdocstestsitewp-contentpluginsbasic-pluginnode_modulesgulp-
clilibversioned^4.0.0index.js
- C:xampphtdocstestsitewp-contentpluginsbasic-pluginnode_modulesgulp-
cliindex.js
- C:xampphtdocstestsitewp-contentpluginsbasic-pluginnode_modulesgulp
bingulp.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:xampphtdocstestsitewp-contentpluginsbasic-
plugingulpfile.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'
]
}
虽然我已经添加了gulp-watch插件并将其保存在我的devDependencies中，我也使用require()方法在gulpfile.js中调用它，但它仍然给出了错误模块未找到。我还添加了我的gulpfile.js和包。Json文件，你们自己可以看到。这是我的包裹。json文件:
{
"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 <arslanarshad321@gmail.com>",
"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": "$"
}
}
这是我的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();
}));
您需要添加add/installgulp-watch…我在你的package.json里没看到。要添加它，请输入:
npm install gulp-watch
或
yarn add gulp-watch