Блог

Я столкнулся с проблемой gulp с уменьшением некоторых scss.

Я только что обновил свой файл из очень старого кода, но столкнулся с ошибкой при компиляции scss.

Я бегу gulp bundleSass и получаю сообщение об ошибке:

 TypeError: Cannot read property 'isNull' of undefined
    at DestroyableTransform._transform (C:xampphtdocs...node_modulesgulp-clean-cssindex.js:15:14)
    at DestroyableTransform.Transform._read (C:...node_modulesreadable-streamlib_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (C:xampphtdocs...node_modulesreadable-streamlib_stream_transform.js:172:83)
    at doWrite (C:xampphtdocs...node_modulesreadable-streamlib_stream_writable.js:428:64)
    at writeOrBuffer (C:xampphtdocsnode_modulesreadable-streamlib_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (C:xampphtdocs...node_modulesreadable-streamlib_stream_writable.js:334:11)
    at bundleSass (C:xampphtdocs...gulpfile.js:21:21)
    at bundleSass (C:xampphtdocs...node_modulesundertakerlibset-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 не делает этого.

Вот правильный файл gulp с исправлениями:

 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;