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