带有gulp sass的gulp autoprefixer不创建前缀

那么gulp自动前置器是如何工作的呢

我的理解是：

transition: max-height 1s ease-in-out; 

应该转变成这样

transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;

这是我的代码：

var sass    = require('gulp-sass');
var concat  = require('gulp-concat');
var rename  = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
  gulp.src('sass/**/*.scss')
    .pipe(autoprefixer('last 2 version'))
    .pipe(sass({ style: 'expanded' }))
    .on("error", handleError)
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./'));
});

---

我尝试在sass前后移动autoprefixer，但没有收到预期的输出。

sass是预处理器，AutoPrefifer是后处理器。但是，gulpfile在预处理器之前使用后处理器。因此，您只需更改顺序：

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

gulp.task('styles', function() {
  return gulp.src('sass/**/*.scss')
    .pipe(sass({ style: 'expanded' }))
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest(''))
    .on("error", handleError);
});

请注意，我删除了

concat

管道，因为Sass编译器实际上为您完成了这项工作。只需确保您在

main.scss

文件中使用了

@import“foo_partial”

（没有前导下划线），并且您的分区文件名有前导下划线。如果这令人困惑，请查看快速文档

还要注意，我添加了一个

return

语句，因为这有助于Gulp判断任务何时完成

预处理器与后处理器

gulp中的Sass操作将任何部分导入和连接到单个文件中，然后将代码编译成有效的CSS。原来的Sass代码现在变成了CSS。因此，它被称为预处理器，因为它在代码生成CSS之前就完成了它的工作

---

另一方面，Autoprefixer工作在CSS上，而不是Sass代码，因此它需要在Sass代码已经转换为CSS之后进行。这就是为什么它被称为后处理器，因为它在代码为CSS之后执行它的操作。

是否有任何其他配置代码可用于省略的sass和autoprefixer任务？（顺便说一句，自动刷新器应该在sass之后出现）似乎将其移动到了sass之下确实解决了它。真奇怪。再次感谢你的帮助！你实际得到的结果是什么？首先非常感谢你，你的帖子非常清晰，但是我得到了这个错误，你知道为什么吗？“Error:EEXIST，mkdir”我编辑后将其输出到一个目录中，而不是像以前那样的css文件。看看这是否有效。