gulp-sass 的 gulp-autoprefixer 不创建前缀

Question

那么 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 前后移动自动前缀，但没有收到预期的输出。

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 能够判断任务何时完成。

预处理器与后处理器

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

另一方面，Autoprefixer 适用于 CSS，而不是 Sass 代码，因此它需要在 Sass 代码已经转换为 CSS 之后使用。这就是为什么它被称为后处理器，因为它在代码是 CSS 之后做它的事情。