Как подключить gulp-autoprefixer в gulpfile.js?

Question

[ne_pes]

Есть gulpfile.js, при вводе команды gulp watch запускается browser-sync и компилятор sass, нужно еще подключить gulp-autoprefixe, не понимаю как сделать, помогите, буду очень благодарен (сам gulp-autoprefixer)

var gulp        = require('gulp'), 
    sass        = require('gulp-sass'), 
    browserSync = require('browser-sync'); 


gulp.task('sass', function(){ 
    return gulp.src(['app/sass/**/*.sass', 'app/sass/**/*.scss']) 
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 
        .pipe(gulp.dest('app/css')) 
        .pipe(browserSync.reload({stream: true})) 
});

gulp.task('browser-sync', function() { 
    browserSync({ 
        proxy:"Site",
        notify: false 
    });
});

gulp.task('watch', ['browser-sync', 'sass'], function() {
    gulp.watch(['app/sass/**/*.sass', 'app/sass/**/*.scss'], ['sass']); 
    gulp.watch("**/*.php", browserSync.reload);
    gulp.watch("app/include/*.html", browserSync.reload);
    gulp.watch("app/js/*.js", browserSync.reload);
});

Comments

[sim3x]

Если не работаете со старыми браузерами - можете его не подключать вообще

Answer 1

[David Halkin]

npm i gulp-autoprefixer -S

var gulp        = require('gulp'), 
    sass        = require('gulp-sass'), 
autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync'); 


gulp.task('sass', function(){ 
    return gulp.src(['app/sass/**/*.sass', 'app/sass/**/*.scss']) 
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('app/css')) 
        .pipe(browserSync.reload({stream: true})) 
});

Comments

[ne_pes]

а что это значит?
'last 15 versions', '> 1%', 'ie 8', 'ie 7'

[David Halkin]

ne_pes, какие версии браузеров нужны .вы лучше мануалы почитайте по этому плагину=)

Answer 2

[dmitrygavrish]

Подключаем к аутпуту gulp-sass'а:

var autoprefixer = require('gulp-autoprefixer');
var config = ... // ваш конфиг для автопрефиксера
...
gulp.task('sass', function(){ 
    return gulp.src(['app/sass/**/*.sass', 'app/sass/**/*.scss']) 
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 
        .pipe(autoprefixer(config))
        .pipe(gulp.dest('app/css')) 
        .pipe(browserSync.reload({stream: true})) 
});
...