Попытка интегрировать gulp SASS с gulp Autoprefixer-postcss, неудачно несчастным

Question

Итак, Autoprefixer подталкивает меня к использованию обновленной версии postcss, поэтому я пытаюсь обновить свой файл Gulp.

Проблема заключается в том, что все примеры не включают Sass в качестве первого шага; Я использую гуль-руби-сасс.

Если я запускаю мою Sass задачу на моем каталоге Сасс (есть 2 SCSS файлы мне нужно обрабатывать там), это работает и выходы 2 CSS файлы в каталоге Dest:

gulp.task('sass', function() { 
    return sass('./app/assets/sass') 
    .on('error', function(err) { 
    console.error('Error!', err.message); 
    }) 
    .pipe(gulp.dest('./app/assets/css')) 
    .pipe(reload({ 
    stream: true 
    })); 
}); 

Но мой вопрос как интегрировать следующую часть, передать CSS через autoprefixer и сгенерировать исходные карты? Если я запускаю это следующим в последовательности, это взрывает с объектом не является функцией ошибки:

gulp.task('autoprefixer', function() { 
    return gulp.src('./app/assets/css/') 
    .pipe(sourcemaps.init()) 
    .pipe(postcss([autoprefixer({ 
    browsers: ['last 2 versions'] 
    })])) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('./app/assets/css')); 
}); 

Я пытался запустить их как последовательность, но предпочел бы интегрировать их:

gulp.task('styles', function() { 
    runSequence('sass', 'autoprefixer'); 
}); 

Я просто не могу собрать трубку, которая получает рубиновое, autoprefixer и sourcemaps, чтобы все работали вместе.

UPDATE:

ОК, даже если я решу сохранить задачу отделенный (как предложено ниже, @ патрик-kostjens), когда я запускаю задачу Autoprefixer я получаю эту ошибку:

[08:56:38] Starting 'autoprefixer'... 

events.js:72 
    throw er; // Unhandled 'error' event 
     ^
TypeError: Cannot call method 'toString' of null 
at new Input (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/input.js:29:24) 
at Object.parse [as default] (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/parse.js:17:17) 
at new LazyResult (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:54:42) 
at Processor.process (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:30:16) 
at Transform.stream._transform (/Users/stevelombardi/github/designsystem/node_modules/gulp-postcss/index.js:44:8) 
at Transform._read (_stream_transform.js:179:10) 
at Transform._write (_stream_transform.js:167:12) 
at doWrite (_stream_writable.js:223:10) 
at writeOrBuffer (_stream_writable.js:213:5) 
at Transform.Writable.write (_stream_writable.js:180:11) 
at write (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24) 
at flow (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7) 
at DestroyableTransform.pipeOnReadable (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5) 
at DestroyableTransform.EventEmitter.emit (events.js:92:17) 
at emitReadable_ (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:448:10) 
at emitReadable (/Users/stevelombardi/github/designsystem/node_modules/gulp-sourcemaps/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:444:5) 

И я попробовал autoprefixer = autoprefixer-core, как было предложено.

Answer 1

Лично я хотел бы сделать sass задачу зависимость от autoprefixer, объявив autoprefixer задачу следующим образом:

gulp.task('autoprefixer', ['sass'], function() { 
    // Your current autoprefixer code here. 
}); 

Вы можете просто запустить autoprefixer задачу.

Если вы действительно хотите, чтобы интегрировать их в одну задачу (даже если задачи сделать две разные вещи), вы можете попробовать что-то вроде этого:

gulp.task('autoprefixer', function() { 
    return es.concat( 
     gulp.src('./app/assets/css/') 
      .pipe(sourcemaps.init()) 
      .pipe(postcss([autoprefixer({ 
       browsers: ['last 2 versions'] 
      })])) 
      .pipe(sourcemaps.write('.')) 
     , 
     sass('./app/assets/sass') 
      .on('error', function(err) { 
       console.error('Error!', err.message); 
      })) 
     .pipe(gulp.dest('./app/assets/css')); 
}); 

Не забудьте определить esrequire('event-stream'), как.

Answer 2

Как вы относитесь к таким образом, как autoprefixer? Это не работает для меня:

var autoprefixer = require('gulp-autoprefixer'); 

Это делает работу:

var autoprefixer = require('autoprefixer-core'); 

Answer 3

Попробуйте импортировать autoprefixer вместо этого. Я не смог заставить gulp-autoprefixer работать, и autoprefixer-core теперь устарел.

npm install autoprefixer --save-dev