Задача Clean-Css выдает ошибку в gulpfile: не может прочитать свойство 'on'

Question

Я совершенно новичок в gulp, и я хотел добавить задачу, чтобы минимизировать и в конечном итоге очистить любые дубликаты или неиспользуемые CSS. Мой gulpfile ниже, и на данный момент я все еще в процессе обучения.

Я знаю, что позже я буду использовать post-css и модули, которые могут пойти вместе с ним. Прямо сейчас я получаю ошибку: "Cannot read property 'on' of undefined at DestroyableTransform.Readable.pipe", Это исходит от cleancss задание, когда я его вынимаю, ошибок нет. Любая помощь и предложения будут оценены.

//JS
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cleancss = require('clean-css');
var autoPrefixer = require('gulp-autoprefixer');

gulp.task('autoPrefixer', function() {
    return gulp.src('../css/*.css')
        .pipe(autoPrefixer ({
            browsers: ['last 2 versions'],
            }))
            .pipe(gulp.dest('../css'))
    });

gulp.task('cleancss', function() {
  return gulp.src('../css/*.css')
    .pipe(cleancss({compatibility: 'ie8'}))
    .pipe(gulp.dest('../css/min'));
});


gulp.task('sass', function(){
  return gulp.src('../scss/*.scss')
    .pipe(sass().on('error', function(err) {
      console.error('\x07'); // so it doesn't just fail (literally) silently!
      sass.logError.bind(this)(err);
    })) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('../css'))
    .pipe(autoPrefixer())
    .pipe(browserSync.reload({
        stream: true
    }))
});


gulp.task('watch', ['browserSync','sass','autoPrefixer','cleancss'], function() {
    gulp.watch('../scss/*.scss', ['sass']);
    gulp.watch('../*.php', browserSync.reload);
    gulp.watch('../js/*.js', browserSync.reload);
});

gulp.task('browserSync', function() {
    browserSync.init ({
        open: 'external',
        host: 'testsite.local',
        proxy: 'testsite.local',
        port: 3000
    })
        browserSync ({
        server: {
            baseDir: 'app'
        },
    })

});

Answer 1

Вы должны использовать плагин gulp для очищения, а не очищать напрямую.

var cleancss = require('gulp-clean-css');

вместо

var cleancss = require('clean-css');

Не забудьте установить его, если вы еще этого не сделали:

npm install gulp-clean-css --save-dev

Answer 2

Мне действительно удалось заставить это работать, используя "карту vynil", как обсуждено здесь: https://github.com/jakubpawlowicz/clean-css/issues/342. Надеюсь, что эта ссылка может помочь кому-либо еще с такой же проблемой.