31570


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

[code]

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

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

・エラー

[code]

    [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)
    
[/code]

・ソース

[code]

    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');
    
[/code]

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

ただ、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で行うためにはどうしたらよいのでしょうか？

[code]

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

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

[code]

    //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']);//監視したいファイルの相対パス
    });
    
[/code]

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

[code]

    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
      ];
    
[/code]

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

[code]

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


CC BY-SA 3.0
2017-01-02T06:11:59.353
31568
2017-01-03T09:18:07.960
2017-01-03T09:18:07.960
14320
14320
question
gulp
autoprefixerを導入したのですが、エラーが出ます。


`autoprefixer` を`reuire`してないため、ですね。

PostCSSのプラグインとして autoprefixer を使うのであれば gulp-autoprefixer ではなく
[autoprefixer](https://github.com/postcss/autoprefixer)の方になるかと思います。

各requireの最後あたりに

[code]

    var autoprefixer = require('autoprefixer');
    
[/code]

を追加します。

* * *

### 追記された質問について

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

質問に記載された

[code]

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

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

[Using postcss-cssnext](http://cssnext.io/usage/)

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

[code]

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

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

[code]

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

これは前回の質問( [cssnext から rem に自動で px
を加える機能をなくしたい](https://ja.stackoverflow.com/q/31539/2376) )でも触れられてたことですね。

* * *

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

[code]

    //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下に配置
    });
    // 以下省略
    
[/code]


CC BY-SA 3.0
2017-01-02T07:20:42.200
31570
2017-01-02T15:19:37.970
2017-04-13T12:52:38.920
-1
2376
31568
answer