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;