@ne_pes

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

Есть 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);
});
  • Вопрос задан
  • 3445 просмотров
Решения вопроса 1
northfire
@northfire
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})) 
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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})) 
});
...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы