What's the difference between using autoprefixer within gulp-postcss or outside of it?

2.6k Views Asked by At

I'm using Gulp and have used the Gulp Autoprefixer standalone such as:

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
        //.................
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: [
              //..........
            ],
        }))
        //............
});

...but then I see the Gulp Postcss plugin which seems to wrap the usage of a non-gulp autoprefixer such as:

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
    //.................
            .pipe(sass())
            .pipe(postcss([
                autoprefixer({
                    browsers: [
                        //.......
                    ],
                }),
            ]))
    //............
});

What is the difference?

1

There are 1 best solutions below

1
On BEST ANSWER

Autoprefixer is just a PostCSS plugin. There is no way to run it without PostCSS.

gulp-autoprefixer hides PostCSS inside. Like a shortcut for gulp-postcss(autoprefixer). It is unofficial way to run Autoprefixer.

Autoprefixer author recommends to use only gulp-postcss, because:

  • You will get Autoprefixer updates faster.
  • You can combine Autoprefixer with other PostCSS-based tools to improve performance. Parsing step (the longest in CSS processing) will executed only once for all PostCSS-based tools (including Autoprefixer).
  • It is official way and Autoprefixer and PostCSS team test it better.