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