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

こんにちは!のせっち@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 -Dnpm 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制作に必須の設定は下記の記事で解説しています。

laravel-mixでpolyfillを付ける方法も解説しました。

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。