GulpとPugの制作環境で画像のwidthとheight属性を自動で付与されるようにする
はじめに
普段、仕事では Astro などのフロントエンドフレームワークは使えず、Pug と Gulp で制作しています。
毎回、imgタグにwidthとheight属性を手動で付けるのは大変なので、自動で付与されるようにしました。
以前、技術ブログの方で解説した Gulp と Pug の制作環境に追加していきますので、こちらの記事も参考にしてください。
https://hypb.dev/articles/gulp-template
リポジトリはこちらになります。
https://github.com/nono-k/gulp-template
インストール
ざっくりとした方針としては、Pug で画像を表示する Mixin を作成し、その引数に画像のパスを渡すことで、画像のサイズを取得して、widthとheight属性を自動で付与できるようにします。
インストールするものとして、Node.js から Pug ファイル内にデータを渡せるように、pug-dataを。また、画像ファイルのサイズを取得できるimage-sizeもインストールします。
npm install --save-dev pug-data [email protected]
