autoprefixerを導入したのですが、エラーが出ます。

http://blog.shibayu36.org/entry/2016/07/20/102641
を参考にautoprefixerを導入したのですが、エラーが出ます。
おそらく

  autoprefixer({
          browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
          cascade: false
      }),

が間違っているのだと思いますが、JS初心者にもわかるように教えていただければ幸いです。

・エラー

[14:56:23] Using gulpfile ~\Desktop\images\gulp-folder\website\lll\gulpfile.js
[14:56:23] Starting 'watch'...
[14:56:23] Finished 'watch' after 246 ms
[14:57:09] Starting 'css'...
[14:57:09] 'css' errored after 421 μs
[14:57:09] ReferenceError: autoprefixer is not defined
    at Gulp.<anonymous> (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\gulpfile.js:21:3)
    at module.exports (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\orchestrator\index.js:134:8)
    at Gulp.<anonymous> (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\gulp\index.js:36:18)
    at Gaze.<anonymous> (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\glob-watcher\index.js:18:14)
    at emitTwo (events.js:106:13)
    at Gaze.emit (events.js:191:7)
    at Gaze.emit (C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\gaze\lib\gaze.js:129:32)
    at C:\Users\lllll\Desktop\images\gulp-folder\website\lll\node_modules\gaze\lib\gaze.js:415:16
    at StatWatcher._pollers.(anonymous function) (C:\Users\lllll\Desktop\images\gulp-folder\website\log\node_modules\gaze\lib\gaze.js:326:7)
    at emitTwo (events.js:106:13)
    at StatWatcher.emit (events.js:191:7)
    at StatWatcher._handle.onchange (fs.js:1487:10)

・ソース

var gulp = require('gulp'); //gulpをインポート
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var cssnextWithoutRem = cssnext({
    features: {
        rem: false,
    },
}); //IE9以上は、remが使えるので、pxを生成されないようにする
var nested = require('postcss-nested');
var csswring = require('csswring');
var calc = require('postcss-calc');
var customProperties = require("postcss-custom-properties");
var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える

gulp.task('css', function () {           //”css”タスクを登録
  var plugins = [
  postcssimport,
  cssnextWithoutRem, //IE9以上は、remが使えるので、pxを生成されないようにする
  autoprefixer({
          browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
          cascade: false
      }),
  nested,
  calc,
  csswring,
  customProperties,
  customMedia
  ];

console.log( Array.isArray(plugins) );//pluginsの定義の後で、 !Array.isArray(plugins)の値がどうなってるかをログを取る為

  return gulp.src(
    ['./src-before/*' , './src-before/*/*'],
    { base: 'src-before' })         //src-before下にある.cssファイルを指定
    .pipe(postcss(plugins))              //PostCSSにファイルを処理してもらう
    .pipe(gulp.dest('./dest-after/css'));          //生成されたCSSをdest-after下に配置
});

//以下gulp-watch
gulp.task('watch', function(){
  gulp.watch(['src-before/*' , 'src-before/*/*' , 'src-before/*/*/*'], ['css']);//監視したいファイルの相対パス
});



var customProperties = require("postcss-custom-properties");
var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える
var autoprefixer = require('autoprefixer');

としたところトランスパイルはできました。

ただ、nextcssにこれはあるようなので下記のエラーが出ます。

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in
your postcss plugins. This might be inefficient. You should remove
'autoprefixer' from your postcss plugin list since it's already
included by postcss-cssnext.

結局下記をnextcssで行うためにはどうしたらよいのでしょうか？

autoprefixer({
      browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
      cascade: false
  }),

・教えてもらった情報をもとに自分で試行錯誤しましたがエラーが出ます。

//gulpfile.js
var gulp = require('gulp'); //gulpをインポート
var postcssimport = require('postcss-import');
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var cssNext = cssnext({
    browsers: [
        'last 2 version', 
        'iOS >= 8.1',
        'Android >= 4.4'
    ],
}); //IE9以上は、remが使えるので、pxを生成されないようにする
var nested = require('postcss-nested');
var csswring = require('csswring');
var calc = require('postcss-calc');
var customProperties = require("postcss-custom-properties");
var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える


gulp.task('css', function () {           //”css”タスクを登録
  var plugins = [
  postcssimport,
  cssNext, //IE9以上は、remが使えるので、pxを生成されないようにする
  autoprefixer({
          browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
          cascade: false
      }),
  nested,
  calc,
  csswring,
  customProperties,
  customMedia
  ];

console.log( Array.isArray(plugins) );//pluginsの定義の後で、 !Array.isArray(plugins)の値がどうなってるかをログを取る為

  return gulp.src(
    ['./src-before/*' , './src-before/*/*'],
    { base: 'src-before' })         //src-before下にある.cssファイルを指定
    .pipe(postcss(plugins))              //PostCSSにファイルを処理してもらう
    .pipe(gulp.dest('./dest-after/css'));          //生成されたCSSをdest-after下に配置
});

//以下gulp-watch
gulp.task('watch', function(){
  gulp.watch(['src-before/*' , 'src-before/*/*' , 'src-before/*/*/*'], ['css']);//監視したいファイルの相対パス
});

下記の部分は読み込んだプラグインを記載するようですが、autoprefixerは
プラグインの中の機能を記載しているのでしょうか？
初心者なのでここまで難しいとわかりません。

gulp.task('css', function () {           //”css”タスクを登録
  var plugins = [
  postcssimport,
  cssNext, //IE9以上は、remが使えるので、pxを生成されないようにする
  autoprefixer({
          browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
          cascade: false
      }),
  nested,
  calc,
  csswring,
  customProperties,
  customMedia
  ];

その後下記のようにrequireを使った書き方をしていたので、そのように自分なりに行ったのですが、うまくいきませんでした。
最後にここだけ教えてもらえませんか？

 const plugins = [
        require('postcss-import'),
        require(cssnext({
          browsers: [
            'last 2 version',
            'iOS >= 8.1',
            'Android >= 4.4',
          ],
        })), //ソースではわからないが、IE9以上は、remが使えるので、remからpxを生成されないように、こちらで行っている
        require('csswring')
    ];