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

Question

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?

Answer 1

Autoprefixer 只是一个 PostCSS 插件。没有 PostCSS 就无法运行它。

gulp-autoprefixer将 PostCSS 隐藏在里面。就像gulp-postcss(autoprefixer). 这是运行 Autoprefixer 的非官方方式。

Autoprefixer 作者建议仅使用gulp-postcss，因为：

• 您将更快地获得 Autoprefixer 更新。
• 您可以将 Autoprefixer 与其他基于 PostCSS 的工具结合起来以提高性能。对于所有基于 PostCSS 的工具（包括 Autoprefixer），解析步骤（CSS 处理中最长的）只会执行一次。
• 这是官方方式，Autoprefixer 和 PostCSS 团队对其进行了更好的测试。