gulp-autoprefixer с gulp-sass не создавая префиксов

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('./')); 
}); 

Я попытался переместить autoprefixer до и после но я не получаю ожидаемого результата.

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 (без знака подчеркивания) и что имена файлов ваших партиций имеют лидирующие символы подчеркивания. Если это путано, ознакомьтесь с быстрой документацией here.

Также обратите внимание, что я добавил оператор return, так как это позволяет Gulp быть в состоянии сказать, когда задача будет выполнена.

Препроцессор против Постпроцессора

Действия Сасс в глотке сцепляет любой частичный импорт и в один файл, а затем компилирует код в правильный CSS. Итак, каков был код Sass, теперь CSS. Поэтому он известен как препроцессор, потому что он делает свою вещь до того, как код будет CSS.

Autoprefixer, с другой стороны, работает с CSS, а не с кодом Sass, поэтому он должен появиться после того, как код Sass уже был превращен в CSS. Вот почему он называется постпроцессором, потому что он делает свою работу после кода CSS.