配置Gulpfile时遭遇TypeError: Cannot read properties of undefined (reading 'pipe')错误求助

Let's break down the issues in your code that are causing this error, and fix them step by step:

1. Incorrect Gulp Import Syntax #

You're trying to import a Gulp constructor and an unused tree method that don't exist in the core gulp exports. Gulp provides direct methods like src, dest, parallel out of the box—no need to instantiate a Gulp object.

Fix:
Replace your gulp import line with:

const { src, dest, parallel, series } = require('gulp');

2. Broken SCSS/Sass Setup #

The gulp-scss package is deprecated, and your import syntax here is incorrect. The standard setup uses gulp-sass paired with the official sass (dart-sass) package.

First, install the correct dependencies if you haven't:

npm uninstall gulp-scss scss
npm install gulp-sass sass --save-dev

Then fix the import line:

const sass = require('gulp-sass')(require('sass'));

(Update your SCSS task to use sass() instead of scss() accordingly.)

3. Invalid src Options Format #

You're passing an array [{allowEmpty:true}] as the second argument to src, but gulp expects an options object, not an array.

Fix:
Change this line:

return src('js/*.js',[{allowEmpty:true}])

To:

return src('js/*.js', { allowEmpty: true })

4. Minor Logical Issue in Pipelines #

You're renaming files to .min.js/.min.css before concatenating them—this means your final concatenated file won't have the minified extension in its name. Swap the order of concat and rename to fix this:

// For JS task
.pipe(concat('AllJs.js'))
.pipe(rename({ extname: '.min.js' }))

// For SCSS task
.pipe(concat('AllCss.css'))
.pipe(rename({ extname: '.min.css' }))

Full Corrected Gulpfile #

// Importing gulp modules correctly
const { src, dest, parallel } = require('gulp');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass')(require('sass'));
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const rename = require('gulp-rename');

// Minimizing js files
function operationsWithJsFiles() {
  return src('js/*.js', { allowEmpty: true })
    .pipe(uglify())
    .pipe(concat('AllJs.js'))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('../Dist'));
}

// Minimizing scss files
function operationsWithScssFiles() {
  return src('scss/*.scss')
    .pipe(sass({ outputStyle: 'compressed' })) // Adds CSS minification since cleanCss wasn't being used
    .pipe(autoprefixer({ cascade: false }))
    .pipe(concat('AllCss.css'))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('../Dist'));
}

exports.default = parallel(operationsWithJsFiles, operationsWithScssFiles);

Additional Checks #

• Run npm install again to ensure all dependencies are properly installed and compatible.
• Double-check that your js/ and scss/ directories exist relative to your gulpfile location (you mentioned you verified this, but it's always good to confirm).

内容的提问来源于stack exchange，提问作者Dalbaeb