2016-10-17 4 views
3

Ошибка исходит из плагина postcss, я думаю, что, возможно, написал его неправильно.Ошибка PostCSS: [object Object] не является плагином PostCSS

Я пытаюсь добавить cssnano и autoprefixer в плагин postcss.

gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143 
     throw new Error(i + ' is not a PostCSS plugin'); 
     ^

Error: [object Object] is not a PostCSS plugin 
    at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15) 
    at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25) 
    at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10) 
    at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5) 
    at Transform._read (_stream_transform.js:167:10) 
    at Transform._write (_stream_transform.js:155:12) 
    at doWrite (_stream_writable.js:300:12) 
    at writeOrBuffer (_stream_writable.js:286:5) 
    at Transform.Writable.write (_stream_writable.js:214:11) 
    at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20) 
Mac-a45e60e72dad:gulp JoeKonst$ 

Мой код:

// Dependancies 
var gulp = require('gulp'), 
    browserSync = require('browser-sync'), 
    plumber = require('gulp-plumber'), 
    autoprefixer = require('gulp-autoprefixer'), 
    uglify = require('gulp-uglify'), 
    compass = require('gulp-compass'), 
    rename = require('gulp-rename'), 
    nano = require('cssnano'), 
    del = require('del'), 
    postcss = require('gulp-postcss'), 
    sass = require('gulp-sass'); 

// Styles 
gulp.task('styles', function(){ 
    gulp.src('sass/main.scss') 
    .pipe(sass()) 
    .pipe(postcss([autoprefixer({browsers: ['last 2 versions']}), nano()])) 
    .pipe(gulp.dest('css/')); 

    gulp.watch('sass/**/*.scss', ['styles']); 
}); 

// Tasks 
gulp.task('default', ['styles']); 

ответ

10

Вы используете gulp-autoprefixer пакет. Это просто обертка вокруг оригинального пакета autoprefixer, который превращает его в плагин gulp, поэтому вы можете сделать .pipe(autoprefixer()).

Однако postcss ожидает оригинальную упаковку, а не плагин для глотки.

Таким образом, вместо этого:

autoprefixer = require('gulp-autoprefixer'), 

Вам необходимо установить autoprefixer пакет и сделать это:

autoprefixer = require('autoprefixer'), 
+0

Если бы тот же вопрос также с глотком-cssnano - он также не может быть использован в качестве PostCSS плагин. Пришлось требовать и использовать «cssnano» вместо «gulp-cssnano». Визуально это выглядит почти так же, как новичок в Gulp, я должен сказать, что это не так. –

+0

дополнительная выгода: теперь вы можете «внезапно» использовать параметры внутри вашего автозапуска: '.pipe (postcss ([autoprefixer ({browsers: ['iOS ...']})]))' –

Смежные вопросы