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

投稿者: Anonymous

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 ~Desktopimagesgulp-folderwebsitelllgulpfile.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:UserslllllDesktopimagesgulp-folderwebsitelllgulpfile.js:21:3)
    at module.exports (C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesorchestratorlibrunTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesorchestratorindex.js:273:3)
    at Gulp.Orchestrator._runStep (C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesorchestratorindex.js:214:10)
    at Gulp.Orchestrator.start (C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesorchestratorindex.js:134:8)
    at Gulp.<anonymous> (C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesgulpindex.js:36:18)
    at Gaze.<anonymous> (C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesglob-watcherindex.js:18:14)
    at emitTwo (events.js:106:13)
    at Gaze.emit (events.js:191:7)
    at Gaze.emit (C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesgazelibgaze.js:129:32)
    at C:UserslllllDesktopimagesgulp-folderwebsitelllnode_modulesgazelibgaze.js:415:16
    at StatWatcher._pollers.(anonymous function) (C:UserslllllDesktopimagesgulp-folderwebsitelognode_modulesgazelibgaze.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')
    ];

解決

autoprefixerreuireしてないため、ですね。

PostCSSのプラグインとして autoprefixer を使うのであれば gulp-autoprefixer ではなく autoprefixerの方になるかと思います。

各requireの最後あたりに

var autoprefixer = require('autoprefixer');

を追加します。


追記された質問について

(ここで回答するのは少し気が引けますが……)

質問に記載された

var cssnextWithoutRem = cssnext({
    features: {
        rem: false,
    },
}); //IE9以上は、remが使えるので、pxを生成されないようにする

の箇所ですが、ここにcssnextのオプションを指定します。

Using postcss-cssnext

指定の仕方はautoprefixerと同じはずです。

var cssnextWithoutRem = cssnext({
    browsers: [
        'last 2 version', 
        'iOS >= 8.1',
        'Android >= 4.4'
    ],
    features: {
        rem: false,
    },
});

そもそもbrowsersとfeaturesは重複する(この指定だとremはoffになるはず)のでfeaturesの指定は省略できます。

var cssNext = cssnext({
    browsers: [
        'last 2 version', 
        'iOS >= 8.1',
        'Android >= 4.4'
    ],
});

これは前回の質問( cssnext から rem に自動で px を加える機能をなくしたい )でも触れられてたことですね。


上記を踏まえて、提示されたgulpfileを書き換えるとこうなります。

//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 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 () {
  var plugins = [
    postcssimport,
    cssnext({
      browsers: [
        'last 2 version', 
        'iOS >= 8.1',
        'Android >= 4.4',
      ],
    }),
    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下に配置
});
// 以下省略
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *