试图将gulp SASS与gulp Autoprefixer-postcss整合,惨遭失败

时间:2015-08-11 14:39:52

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

所以,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。

3 个答案:

答案 0 :(得分: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')

答案 1 :(得分:0)

您如何包含autoprefixer要求?这对我不起作用:

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

这确实有效:

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

答案 2 :(得分:0)

尝试导入autoprefixer。我也无法使gulp-autoprefixer工作,现在不推荐使用autoprefixer-core。

npm install autoprefixer --save-dev