Gulpを使ってobject-fitのIE対応(Polyfill)を自動化する【2分】

投稿日 2021年4月9日
更新日 2021年4月21日
著者のせっち
カテゴリープログラミング

こんにちは！のせっち@nosecchi01です。

object-fitのIE対応をGulpを使って自動対応させる方法を解説します。

object-fitのpolyfillを導入

まずはobject-fit-imagesをインストールします。

npm i object-fit-images

js側はimportするだけです。

import objectFitImages from 'object-fit-images';

objectFitImages();

通常の使い方は、object-fitを指定するクラスにfont-familyをセットで指定します。

.your-favorite-image {
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

こちらは公式の通りです。

Gulpを使って自動対応させる

font-familyを書く作業は自動化できます。Gulpを使う方法をご紹介します。

まずはパッケージをインストール

npm i -D postcss-object-fit-images

npm i -Dはnpm install --save-devと同じです。

scssのコンパイル時にpostcssで自動付与させます。
gulpfile.jsに下記を追記しましょう。

const { src, dest } = require("gulp");
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const objectFit = require('postcss-object-fit-images');

const compileSass = done => {
  src('src/scss/**/*.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(postcss([objectFit]))
  .pipe(dest('dist/css'))
  done();
};

// 省略

これでscssのコンパイル時に自動でpolyfillを追記することができます。

上記のgulpfile.jsでは解説用に最低限の設定のみ書いていますが、Web制作に必須の設定は下記の記事で解説しています。