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

Question

我正在制作一个使用 gulp 来控制我所有资产的 WordPress 插件，当我尝试触发 gulp-watch 功能时，它给我这个错误：

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'
  ]
}

尽管我添加了 gulp-watch 插件并将其保存在我的 devDependencies 中，并且我还在 gulpfile.js 中使用 require() 方法调用了它，但它仍然给出错误 MODULE未找到。我还添加了我的 gulpfile.js 和 package.json 文件，您可以自己查看。这是我的 package.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();
}));

有人可以帮我做些什么吗？我已经为此苦苦挣扎了几个小时。

Answer 1

您需要添加 add/install gulp-watch...我在您的 package.json 中没有看到它。要添加它，请尝试：

npm install gulp-watch

或

yarn add gulp-watch

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

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

javascript

php

node.js

wordpress

gulp