Patryk Dąbrowski Patryk Dąbrowski - 1 month ago 9
CSS Question

How to set gulp autoprefixer that it will be prefix css when I save my project

I have a gulpfile like this

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
return gulp.src('src/sass/*.scss')
.pipe(sass().on('error', sass.logError))
/*.pipe(sass({
outputStyle: 'compressed'
}))*/
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('src/css/'))
.pipe(browserSync.stream());
});


gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./src"
});

gulp.watch('src/sass/**/*.scss', ['sass']);
gulp.watch("src/index.html").on('change', browserSync.reload);
});

gulp.task('image', function() {
gulp.src('src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('src/build/img'));
});

gulp.task('autoprefixer', function() {
return gulp.src('src/css/*')
.pipe(autoprefixer({
browsers: ['last 2 versions', '> 5%', 'iOS 7'],
cascade: false
}))
.pipe(gulp.dest('src/css/'));
});

gulp.task('default', ['serve', 'image', 'autoprefixer' ]);


I would like to prefix my css code when I save my project.
Right now it doesn't work and I have to stop my gulp and then write gulp autoprefixer in the console.
Thanks for help.

Answer

You created new gulp task to that, since you already have tasks "sass" and "serve", you could just include autoprefixer into "sass" task, so it would be like:

gulp.task('sass', function() {
return gulp.src('src/sass/*.scss') 
    .pipe(sass().on('error', sass.logError))
    /*.pipe(sass({
        outputStyle: 'compressed' 
    }))*/
    .pipe(rename({
        suffix: '.min' 
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions', '> 5%', 'iOS 7'],
        cascade: false
    }))
    .pipe(gulp.dest('src/css/')) 
    .pipe(browserSync.stream()); 
});
Comments