不创建前缀的gulp-sass自动修复程序

Question

那么，吞咽自动前缀是如何工作的呢？

我的理解是：

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之前和之后移动自动修复程序，但没有收到预期的输出。

Answer 1

Sass是一个预处理器，autoprexifer是一个后处理器。但是，您的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" (没有前导下划线)，并且您的部分文件名具有前导下划线。如果您对此感到困惑，请查看快速文档here。

还要注意，我添加了一条return语句，因为这有助于让Gulp能够判断任务何时完成。

预处理器vs后处理器

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

另一方面，Autoprefixer在CSS上工作，而不是在Sass代码上，所以它需要在Sass代码已经转换成CSS之后出现。这就是为什么它被称为后处理器，因为它在代码是CSS之后才做它的事情。