Gulp 類型錯誤：無法讀取未定義的屬性“isNull”

Question

我在縮小某些 scss 時遇到了 gulp 問題。

我剛剛用非常舊的代碼修改了我的文件，但我在編譯 scss 時遇到了錯誤。

我正在運行gulp bundleSass並收到錯誤消息：

TypeError: Cannot read property 'isNull' of undefined
    at DestroyableTransform._transform (C:\xampp\htdocs\...\node_modules\gulp-clean-css\index.js:15:14)
    at DestroyableTransform.Transform._read (C:\...\node_modules\readable-stream\lib\_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (C:\xampp\htdocs\...\node_modules\readable-stream\lib\_stream_transform.js:172:83)
    at doWrite (C:\xampp\htdocs\...\node_modules\readable-stream\lib\_stream_writable.js:428:64)
    at writeOrBuffer (C:\xampp\htdocs\node_modules\readable-stream\lib\_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (C:\xampp\htdocs\...\node_modules\readable-stream\lib\_stream_writable.js:334:11)
    at bundleSass (C:\xampp\htdocs\...\gulpfile.js:21:21)
    at bundleSass (C:\xampp\htdocs\...\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:427:14)
    at runBound (domain.js:440:12)

這是我的 gulpfile.js

const {src, dest, watch} = require('gulp');
const minifyJs = require('gulp-uglify');
const minifySass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');
const sourceMaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');

const bundleCss = () => {
  return src('./assets/vendor/**/*.css')
  .pipe(sourceMaps.init())
  .pipe(minifyCss())
  .pipe(concat('bundle.min.css'))
  .pipe(sourceMaps.write())
  .pipe(dest('./dist/css/'));
};

const bundleSass = () => {
  return src('./assets/styles/*.scss')
  .pipe(sourceMaps.init())
  .pipe(minifySass().on('error', minifySass.logError))
  .pipe(minifyCss().write())
  .pipe(sourceMaps.write())
  .pipe(concat('main.min.css'))
  .pipe(dest('/dist/css/'));
};

const bundleJs = () => {
  return src('./assets/vendor/**/*.js')
  .pipe(sourceMaps.init())
  .pipe(minifyJs())
  .pipe(concat('bundle.min.js'))
  .pipe(sourceMaps.write())
  .pipe(dest('./dist/js/'));
};

const devWatch = () => {
  watch('./assets/vendor/**/*.js', bundleJs)
  watch('./assets/vendor/**/*.css', bundleCss)
  watch('./assets/styles/*.scss', bundleSass)
};

exports.bundleCss = bundleCss;
exports.bundleSass = bundleSass;
exports.bundleJs = bundleJs;
exports.devWatch = devWatch;

有誰知道為什么會出錯？ bundleCss沒有。

Answer 1

這是帶有修復的正確 gulpfile：

const {src, dest, watch} = require('gulp');
const minifyJs = require('gulp-uglify');
const compileSass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');
const sourceMaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');

compileSass.compiler = require('node-sass');

// Run gulp bundleCss to execute
const bundleCss = () => {
  return src('./assets/vendor/**/*.css')
  .pipe(sourceMaps.init())
  .pipe(minifyCss())
  .pipe(concat('bundle.min.css'))
  .pipe(sourceMaps.write())
  .pipe(dest('./dist/css/'));
};

// Run gulp bundleSass to execute
const bundleSass = () => {
  return src('./assets/styles/**/*.scss')
  .pipe(sourceMaps.init())
  .pipe(compileSass().on('error', compileSass.logError))
  .pipe(minifyCss())
  .pipe(concat('main.min.css'))
  .pipe(sourceMaps.write())
  .pipe(dest('./dist/css/'));
};

// Run gulp bundleJs to execute
const bundleJs = () => {
  return src('./assets/vendor/**/*.js')
  .pipe(sourceMaps.init())
  .pipe(minifyJs())
  .pipe(concat('bundle.min.js'))
  .pipe(sourceMaps.write())
  .pipe(dest('./dist/js/'));
};

// Run gulp devWatch to execute
const devWatch = () => {
  watch('./assets/vendor/**/*.js', bundleJs)
  watch('./assets/vendor/**/*.css', bundleCss)
  watch('./assets/styles/*.scss', bundleSass)
};

exports.bundleCss = bundleCss;
exports.bundleSass = bundleSass;
exports.bundleJs = bundleJs;
exports.devWatch = devWatch;