gulp-postcssはgulp上でPostCSSが実行できます。PostCSSはポストプロセッサーとして、コンパイル後のCSSに対して整形等の後処理ができます。autoprefixerはPostCSSのプラグインで、CSSに自動でベンダープレフィックスを付与します。

gulp-postcssとautoprefixerを、それぞれバージョンを指定してインストールします。バージョンを指定しなければ最新バージョンがインストールされますが、最新バージョン通しの組み合わせではエラーが発生する場合があります。

//gulp-postcssバージョン8.0.0とautoprefixerバージョン9.8.6のインストール
npm install gulp-postcss@8.0.0 autoprefixer@9.8.6

gulpfile.jsにautoprefixerの処理を追加します。gulp-postcss及びautoprefixerの実行はgulp-sass実行の後にする必要があります。

autoprefixerのオプションoverrideBrowserslistは、対象ブラウザを2つ前のバージョン、IE11以上、Android4.3以上、safari9以上にしています。grid: trueはCSSのdisplay: grid;に対してベンダープレフィックスを付与、cascade: falseはソース上ベンダープレフィックスのインデントをなしにします。

//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('autoprefixer');  //autoprefixerの読み込み
const postcss = require('gulp-postcss');  //gulp-postcssの読み込み

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(postcss([  //gulp-postcssの実行
      autoprefixer({  //autoprefixerの実行
        overrideBrowserslist: [
          "last 2 versions",
          "ie >= 11",
          "Android >= 4.3",
          "ios_saf >= 9"
        ],
        grid: true,
        cascade: false
      })
    ]))
    .pipe(
      gulp
        .dest('../assets/css')
    );
}

gulp.task('default', styles);

これでautoprefixerが利用できるようになりました。gulpでsassをコンパイルすると、以下のようにlayout.cssにベンダープレフィックスが付与されます。

//layout.css
@charset "UTF-8";

.p-access {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
  background: -webkit-linear-gradient(top, white, black);
  background: linear-gradient(to bottom, white, black);
}

ベンダープレフィックスのインデントが必要な場合はautoprefixerのオプションで指定したcascade: falseを削除します。cascadeの初期値はtrueです。コンパイル後のCSSは以下になります。

//layout.css
@charset "UTF-8";

.p-access {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
  background: -webkit-linear-gradient(top, white, black);
  background: linear-gradient(to bottom, white, black);
}