-2

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')
    ];
11
  • 1
    質問のエラーの原因とは関係ありませんが、autoprefixercssnext に含まれています。他にも postcss-calcpostcss-custom-propertiespostcss-custom-mediacssnext に含まれています。また、postcss-nestedcssnext に含まれる postcss-nesting と機能的に重複しています。これらのプラグインは cssnext を使うのなら必要ないはずです。
    – mjy
    2017年1月2日 7:27
  • autoprefixer モジュールを使う際に autoprefixer is not defined というエラーが出るのをどうすればよいか?」という質問に対して完全な回答が既にあります。「autoprefixer モジュールを直接に使うのは止めた。ついては、cssnext に含まれる autoprefixer にオプションを渡したいが、どうすればよいか?」という新たな問いを投入しないで下さい。
    – mjy
    2017年1月2日 11:12
  • 繰り返し繰り返し、同じ方に同じ事を指摘するのは心苦しいのですが StackOverflow の使い方をご理解いただきたいと思っています。納得いかれないのでしたら、Meta の方でご意見下さい。
    – mjy
    2017年1月2日 11:12
  • 1
    すいません Meta はそういう場所ではないです。「ほかの方もそう思うのな‌​ら」とおしゃったので、「他の方の意見も聞きたい、という事でしたら」という意味でご紹介しました。ja.stackoverflow.com/help/whats-meta をご覧下さい。
    – mjy
    2017年1月2日 12:44
  • 3
    ちゃんと議論をしたいのであればmetaを使うべきですね。読み込んでいないからエラーが出て実行できない、と重複していて警告が出る、別の問題です。私はトピックへの質問に答えましたが、編集によってまるで見当違いのようになってますよね。質問のパターンによっては仕方ない場合もありますが、繰り返してややこしくなりかねません。
    – hinaloe
    2017年1月2日 13:10

1 件の回答 1

1

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下に配置
});
// 以下省略
12
  • ありがとうございます。 re('postcss-calc'); var customProperties = require("postcss-custom-properties"); var customMedia = require("postcss-custom-media"); //うまくいっていない。カスタムメディアクエリーズが使える var autoprefixer = require('autoprefixer'); としたところトランスパイルはできました。 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.
    – web
    2017年1月2日 9:32
  • 1
    @mjyさんがコメントで指摘されているように、cssnextにautoprefixerが含まれてあるのでその重複を示す警告です。言い換えれば、当該の行を書き足す必要はなかった、ということです。
    – hinaloe
    2017年1月2日 9:36
  • var autoprefixer = require('autoprefixer');が必要なかったということはわかりますがbrowsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],はどこに書くのでしょうか
    – web
    2017年1月2日 9:46
  • 結局不要なことをやったわけなので、結局どうすればよいか回答してもらえませんか
    – web
    2017年1月2日 12:38
  • @web 追記しました。確認してみてください。
    – hinaloe
    2017年1月2日 13:23

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。