试图将 gulp SASS 与 gulp Autoprefixer-postcss 集成，失败得很惨答案

【问题标题】：Trying to integrate gulp SASS with gulp Autoprefixer-postcss, failing miserably试图将 gulp SASS 与 gulp Autoprefixer-postcss 集成，失败得很惨
【发布时间】：2015-08-11 14:39:52
【问题描述】：

所以，Autoprefixer 一直在让我使用更新后的 postcss 版本，所以我正在尝试更新我的 Gulp 文件。

问题是所有的例子都没有作为第一步集成Sass；我使用 gulp-ruby-sass。

如果我在我的 sass 目录上运行我的 sass 任务（我需要在其中处理 2 个 scss 文件），这将有效并在 dest 目录中输出 2 个 css 文件：

  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
  }));
});

但我的问题是如何集成下一部分，通过 autoprefixer 传递 CSS 并生成源映射？如果我按顺序运行下一个，这会导致对象不是函数错误：

  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');
});

我只是无法将 ruby-sass、autoprefixer 和 sourcemaps 一起工作的管道放在一起。

更新：

好的，即使我决定将任务分开（如下@patrick-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。

【问题讨论】：

标签： gulp autoprefixer gulp-sourcemaps gulp-ruby-sass

【解决方案1】：

就个人而言，我会通过如下声明autoprefixer 任务来使sass 任务成为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'));
});

不要忘记将es 定义为require('event-stream')。

【讨论】：

【解决方案2】：

您如何包含autoprefixer 要求？这对我不起作用：

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

这确实有效：

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

【讨论】：

【解决方案3】：

尝试导入 autoprefixer。我也无法让 gulp-autoprefixer 工作，并且 autoprefixer-core 现在已被弃用。

npm install autoprefixer --save-dev

【讨论】：