GulpとPugの制作環境で画像のwidthとheight属性を自動で付与されるようにする
はじめに
普段、仕事では Astro などのフロントエンドフレームワークは使えず、Pug と Gulp で制作しています。
毎回、imgタグにwidthとheight属性を手動で付けるのは大変なので、自動で付与されるようにしました。
以前、技術ブログの方で解説した Gulp と Pug の制作環境に追加していきますので、こちらの記事も参考にしてください。
リポジトリはこちらになります。
インストール
ざっくりとした方針としては、Pug で画像を表示する Mixin を作成し、その引数に画像のパスを渡すことで、画像のサイズを取得して、widthとheight属性を自動で付与できるようにします。
インストールするものとして、Node.js から Pug ファイル内にデータを渡せるように、pug-dataを。また、画像ファイルのサイズを取得できるimage-sizeもインストールします。
npm install --save-dev pug-data [email protected]自分の環境だと、image-sizeのバージョンが 2 だと上手くコンパイルできなかったので、1.0.0 を指定してください。
gulpfile.js の編集
gulpfile.jsを編集しましょう。
Pug のコンパイル部分を抜粋します。
const gulp = require("gulp");
const pug = require("gulp-pug");
const plumber = require("gulp-plumber");
const browserSync = require("browser-sync").create();
const gulpData = require("gulp-data"); // Pugにデータを渡すためのプラグイン
const imageSize = require("image-size"); // 画像のサイズ（width/height）を取得するライブラリ
const path = require("path");
// ** Pug のコンパイル **
const compilePug = () => {
return (
gulp
.src(["src/pages/**/*.pug", "!src/pug/**"])
.pipe(plumber())
// 各ファイルごとにPugで使用可能なデータを追加
.pipe(
gulpData((file) => {
return {
imageSize: (src) => {
// 画像パスから /common/ を除外（ビルド用の実ファイルパスに変換）
const replaceSrc = src.replace("/common/", "");
// 実際のファイルシステム上の画像の絶対パスを解決
const imagePath = path.resolve(
__dirname,
"src/public",
replaceSrc
);
try {
// 指定画像の幅と高さを取得して返す
return imageSize(imagePath);
} catch (error) {
console.error(`Error: ${error.message}`);
return { width: null, height: null };
}
},
};
})
)
.pipe(pug({ pretty: true })) // PugをHTMLに変換（圧縮しない）
.pipe(gulp.dest("dist")) // 出力先
.pipe(browserSync.stream())
);
};自分の制作環境では、画像の置き場所としてコンパイル前は、src/public/imagesに配置しており、、コンパイル後はdist/common/imagesに配置されるようにしています。
なので、replaceSrcで/common/を除外しています。
最後に画像に関しての Mixin を作成しましょう！
Pug で画像を表示する Mixin の作成
imgタグとpictureタグを表示する Mixin を作成します。
-
const rootDir = '/common/';
const bpMobile = '959px';
mixin img(src, alt)
- const _src = rootDir + 'images/' + src;
- const { width, height } = imageSize(_src);
img(src=_src, alt=alt, width=width, height=height)&attributes(attributes)
mixin pic(pc, sp, alt)
- const _pc = rootDir + 'images/' + pc;
- const _sp = rootDir + 'images/' + sp;
- const { width: pcw, height: pch } = imageSize(_pc);
- const { width: spw, height: sph } = imageSize(_sp);
picture
source(media=`(max-width: ${bpMobile})`, srcset= rootDir + 'images/' + sp, width=spw, height=sph)
img(src= rootDir + 'images/' + pc, alt=alt, width=pcw, height=pch)&attributes(attributes)gulpDataで Pug ファイル内で使用できるようになったimageSizeを使って、画像のサイズを取得しています。サイズを取得できたら、そのままwidthとheight属性に渡しています。
この Mixin の使用例は下記になるでしょう。
// 通常の画像
+img('hoge.png', '画像の説明')
// pictureタグ
+pic('hoge-pc.png', 'hoge-sp.png', '画像の説明')これをコンパイルすると、下記のような HTML になります。
// 通常の画像
<img src="/common/images/hoge.png" alt="画像の説明" width="100" height="100" />
// pictureタグ
<picture>
<source
media="(max-width: 959px)"
srcset="/common/images/hoge-sp.png"
width="100"
height="100"
/>
<img
src="/common/images/hoge-pc.png"
alt="画像の説明"
width="100"
height="100"
/>
</picture>これで、画像のサイズを自動で付与できるようになり、わざわざ画像サイズを手動で付与する必要がなくなりました！