试图把吞咽系统和自动修复器-悲惨地失败了

Question

所以，自动重定位程序一直困扰我使用更新的postcss版本，所以我试图更新我的Gulp文件。

问题是，所有示例都没有将Sass作为第一步进行集成；我使用的是。

如果我在sass目录上运行sass任务(需要在其中处理2个scss文件)，这将在directory中运行并输出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
  }));
});

但是我的问题是如何集成下一部分，通过自动重定位器传递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');
});

我只是不能把得到红宝石的管道，自动重新固定，和源地图一起工作。

更新：

好的，即使我决定将任务分开(如下面@patrick所建议的那样)，当我运行自动重定位器任务时，也会得到以下错误：

    [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)

我试过自动复位器=自动复位器-核心。

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

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

Answer 2

如何包括autoprefixer需求？这对我没用：

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

这样做是可行的：

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

Answer 3

尝试导入自动修复器。我也不能让自动修复器工作，而自动再固定核心现在被废弃了。

npm install autoprefixer --save-dev