Question

那么gulp auto-prefixer如何工作？

我的理解是：

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编译器实际上是为您执行此操作。只需确保您使用的@import "foo_partial"类似于main.scss文件（没有前导下划线），并确保您的部分内容为＆＃39;文件名具有前导下划线。如果这令人困惑，请查看快速文档here。

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

预处理器与后处理器

gulp中的Sass操作将任何部分导入连接到一个文件中，然后将代码编译成有效的CSS。那么Sass代码现在是什么CSS。因此它被称为预处理器，因为它在代码是CSS之前就已经完成了它。
另一方面，Autoprefixer适用于CSS，而不是Sass代码，所以它需要在Sass代码已经转换为CSS之后。这就是为什么它被称为后处理器，因为它在代码是CSS之后就做了它。

gulp-autoprefixer与gulp-sass没有创建前缀

1 个答案: