Как правильно написать задачу autoprefixer при stylus (Gulp)?

Question

[Мари]

есть задача

var gulp = require('gulp'),
	stylus = require('gulp-stylus'),
	autoprefixer = require('gulp-autoprefixer');

gulp.task('styl',function() {
			 return gulp.src('styl/*.styl')
			.on('error', console.log) 
			.pipe(stylus())
			 .pipe(autoprefixer({
			 	browsers: ['last 2 versions'],
                            	cascade: true
                }))
        	.pipe(gulp.dest('public/css/'))
        	.pipe(notify('CSS Done!'))
			.pipe(connect.reload());
		});

	gulp.task('watch', function() {
			gulp.watch('styl/*.styl', ['styl'])
			gulp.watch('jade/index.jade', ['jade'])
			gulp.watch('js/*.js',['js'])
		});

                gulp.task('do', ['watch','jade', 'styl', 'js', 'connect']);

тут кусочек всего gulpfile (я думаю это понятно).
так вот, как правильно написать что бы autoprefixer работал?
или может я чего не понимаю, но префиксы он не ставит, это я точно знаю)
Заранее спасибо)

p.s ну же, я знаю что кто то из вас точно знает)

Comments

[Дима]

У меня все заработало по вашему таску, спасибо :)

Answer 1

[Александр Таратин]

browsers: ['last 2 versions']

А вы точно используете свойства для которых требуются префиксы в последних 2-х версиях браузеров?
keyframe попробуйте вставить куда-нибудь. Сработает ли для него?

Comments

[Мари]

на keyframe есть се префиксы, но я полагаю что это привилегия самого stylus
самое важное - это свойства transition и animation - для них ничего(

[Александр Таратин]

SavaMar: ie11 и ie10 их поддерживают, остальные популярные браузеры тоже давно - все работает как и должно.
Укажите бОльший диапазон поддерживаемых браузеров.

Answer 2

[Victor]

Есть версия специально для stylus: autoprefixer-stylus.

Об этом, кстати, написано в документации к автопрефиксеру:

В итоге получается как-то так:

const autoprefixer = require('autoprefixer-stylus');
const stylus = require('gulp-stylus');

gulp.task('stylus', () => {
  gulp.src('./src/styl/style.styl')
  .pipe(stylus({
    pretty:true,
    use:[autoprefixer('last 2 versions')]
  }))
  .pipe(gulp.dest('./dist/css'))
  .pipe(connect.reload())
});