N
N
ne_pes2018-03-01 19:21:48
gulp.js
ne_pes, 2018-03-01 19:21:48

How to include gulp-autoprefixer in gulpfile.js?

There is gulpfile.js, when you enter the gulp watch command, browser-sync and the sass compiler are launched, you also need to connect gulp-autoprefixe, I don’t understand how to do it, help me, I will be very grateful ( gulp-autoprefixer itself )

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);
});

Answer the question

In order to leave comments, you need to log in

3 answer(s)
D
David Halkin, 2018-03-01
@ne_pes

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})) 
});

D
dmitrygavrish, 2018-03-01
@dmitrygavrish

Connect to gulp-sass's output:

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

T
transform, 2020-10-13
@transform

What properties in css can be used to test the work of gulp-autoprefixer?
Whatever properties you write, no prefixes are added

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question