Gulp 类型错误：无法读取未定义的属性“isNull”

Question

I'm running into a gulp issue with minifying some scss.

I've just revamped my file from extremely old code but I'm running into an error with compiling scss.

I'm running gulp bundleSass and getting an error:

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)

And here is my 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;

Does anyone know why it's erroring? bundleCss does not.

Answer 1

Here's the correct gulpfile with fixes:

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;