gulp-autoprefixer version 2 エラー原因がわかりません。

Question

前提・実現したいこと

package.jsonにbrowserslistを追加したのでがエラーが解消できません。
package.jsonの中にこちらのコードを追加したのですがエラーになります。
原因が分かりません。

"browserslist": [
"last 2 versions",
"Firefox >= 4",
"Android >= 4",
"ios_saf >= 8"
]

発生している問題・エラーメッセージ

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

該当のソースコード

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('default',function(){
  gulp.watch('src/css/style.scss',function(){
    gulp.src('src/css/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(autoprefixer({
      browsers: ['last 2 version', 'Firefox >=4', 'Android >=4', 'ios_saf >=8']
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('src/css'));
  });
});

  "browserslist": [
    "last 2 versions",
    "Firefox >= 4",
    "Android >= 4",
    "ios_saf >= 8"
  ]
}

試したこと

ネットでエラーの原因が分かったのですが
何度やり方を変えたのですがエラーになります。

Answer 1

対応ブラウザは package.json に書いていますので、gulpfile に書く必要はありません。
なので下のように.pipe(autoprefixer())だけでOKです。

gulp.task('default',function(){
  gulp.watch('src/css/style.scss',function(){
    return gulp.src('src/css/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('src/css'));
  });
});

Comments

[oyu]

コンパイルできました。
誠にありがとうございます。
今回の原因はgulpfileにautoprefixerのバージョンは書くことが原因でコンパイルできなかったのですね！
勉強になりました。
ありがとうございます。
またどうぞよろしくお願いいたします。

[takopo]

無事解決できてよかったです！