GULPでautoprefixerを使う方法（エラーの対応方法）

2021年8月1日GULP

GULPでautoprefixerを使う方法を紹介します。
また、postcssのバージョンに対応していないときにエラーが起きるので、その対応方法も紹介します。

GULPでautoprefixerを使う手順

• package.jsonに対応ブラウザを指定
• autoprefixerをインストール
• gulpfile.jsに記述

package.jsonに対応ブラウザを指定

"browserslist": [
"defaults",
"IE 10",
"IE 9"
]

package.jsonに対応してほしいブラウザを記述します。
.browerslistrcを作成して、そこに記述してもいいです。

autoprefixerをインストール:gulp-autoprefixer

主流が二通りあります。

1つ目がgulp-autoprefixerです。

npm i gulp-autoprefixer --save-dev

gulpfile.jsに記述

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const imagemin = require('gulp-imagemin');
const autoprefixer = require('gulp-autoprefixer');


// SASS compile
gulp.task('sass', function () {
  return (
    gulp
      .src(['./src/sass/**/*.scss', '!./src/sass/not-compile.scss'])
      .pipe(sourcemaps.init()) //sourcemaps starts
      .pipe(sass()) //compile
      .pipe(autoprefixer()) //prefix
      .pipe(cssnano()) //minify
      .pipe(sourcemaps.write('.')) //sourcemaps ends
      // renameを関数でやる方法
      .pipe(
        rename(path => {
          // manファイルにはminをつけたくないのでif文
          if (!path.extname.endsWith('.map')) {
            path.basename += '.min';
          }
        })
      )
      .pipe(gulp.dest('./dist/css'))
  );
});

これで使えるようになります。
autoprefixerはcssのみ適用されます。sassの形式では適用できません。
よってsass()をしてからautoprefixerの順番で記述します。

sassの前にautoprefixerを入れると、コメントアウトの(//)でもエラーがでてしまうので、順番には気をつけましょう。

autoprefixerをインストール:autoprefixer+gulp-postcss

gulp-autoprefixerではなく、autoprefixerを使う方法もあります。

yarn add autoprefixer@9.8.6 --dev
yarn add gulp-postcss --dev

上のようにバージョンを指定しないとpostcssに対応していないという理由で、エラーが出る場合があります。

yarn add autoprefixer gulp-postcss --dev

とすると、autoprefixedがまだpostcssのバージョン対応していないとでる場合があります。

あとは上に同じです。