pug starter

コンポーネントの読み込み方法

Pugファイル内でコンポーネントを読み込む場合は以下のように記述します。

include /component/pug/_filename

下層ページもルートパス（`${basePath}`）から指定してください。サンプルページはこちら

/app 内のファイルはすべてコンパイル対象です。再利用するUIパーツやレイアウトは /component に格納してください。

SCSSの読み込み例：@use 'style/_global/g-mixin' as *;

画像の読み込み例：img(src=`${basePath}assets/image/sample.png` alt='説明文')

画像ファイルは /public/assets/image で管理してください。

開発ワークフロー

ページファイルは src/app に、コンポーネントは src/component に格納してください。

• 開発時は npm run watch を実行します。
• pug, scss, typescript を監視しながら live-server を起動し、擬似的なホットリロードを実現します。
• 監視対象を限定する場合：npm run watch:pug や npm run watch:scss などを使用
• 画像のみを dist にコピーする場合：npm run copy:images
• 単独で live-server を立ち上げる場合：npm run serve

コンパイルされた成果物はすべて dist に出力されます。

サーバーへアップロードする際は dist ディレクトリ内のファイルを使用してください。

ディレクトリ構成例

project-root/
├─ src/
│ ├─ app/ # 各ページファイル（.pug）
│ ├─ component/ # 再利用可能なUIパーツ
│ ├─ style/ # SCSSファイル
│ └─ ts/ # TypeScriptファイル
├─ public/
│ └─ assets/image/ # 画像素材
├─ dist/ # コンパイル済みファイル
├─ package.json
└─ README.md

開発のコツ

• コンポーネントは小さく分割して再利用性を高める
• SCSSはBEMやユーティリティクラスで構造を統一する
• TypeScriptはstrictモードで型安全性を保つ
• 画像は最適化（圧縮）してパフォーマンスを確保する