# gulpfile.jsにAutoprefixerのブラウザオプションを書くとエラーがでる場合の修正方法

URL: https://webrandum.net/gulp-autoprefixer-browserslist-setting/
公開日: 2019-10-08
更新日: 2019-10-06
カテゴリー: コーディング
タグ: Autoprefixer, gulp
出典: Webrandum（著者: サイトウ マサカズ）

Autoprefixerのアップデートの影響で、`gulpfile.js`にブラウザオプションを記述していると、下記のようなエラーが出るようになりました。

```
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
```

![Autoprefixerのエラー](https://webrandum.net/mskz/wp-content/uploads/2019/10/image_1-8.png)

解消するためには、package.jsonにブラウザオプションを移動すればOKです。

## ブラウザオプションの設定

今まで`gulpfile.js`に書いてあった設定を`package.json`や`.browserslistrc`に移動すればOKです。

```
gulpfile.js 修正前.pipe(postcss([
  autoprefixer({
    browsers: [
      'last 2 versions',
      'Explorer >= 11',
      'iOS >= 9.0',
      'Android >= 4.1']
  })
]))
```

`browsers:[]`内の設定を切り取ります。

```
gulpfile.js 修正後.pipe(postcss([
  autoprefixer()
]))
```

あとは下記の設定は`package.json`の`}`前にペーストします。

```
package.json"browserslist": [
  "last 2 versions",
  "Explorer 11"
  "iOS 9.0",
  "Android 4.1"
]
```

これで保存して、再度gulpを実行するとエラーが表示されなくなっているはずです。