静的環境を作れないかなと調べてみたところ出来そうな先人の知恵があったので、個人的な備忘録としてまとめます。使いやすかったので、今回もその環境を整えようと思いまして。作っていましたが、今は何がいいのだろうと探すところから始まりました。静的環境を作ってみます。環境構築前に※今回の開発環境にはこちらの記事を参考にさせていただいています。https://zenn.dev/yend724/articles/20220408-tfq16buha8ctdzp7この記事では、以降上記の記事を作成した上で、個人的に使いやすく変更した点を記載しています。環境を整えるのであれば先人様の記事から参照ください。いうPugをHTMLとして出力するプラグインもあります。https://www.npmjs.com/package/@macropygia/vite-plugin-pug-static個人的にgulpで環境構築する際にプラグインを多用して痛い思いをしたので、今回は目に見える形で実装されていた先人様の環境を採用しました。追加した点Sassも追加するPugは先人様の環境でできていましたのでSassを後付けしました。削除しておきましょう。'./style.sass'これだけでSassを導入できるのは楽でいいですよね。使うことがあるかわからないものですが、時と場合によっては必要になるものと思います。ディレクトリ階層を参照がうまく動作していなかったのでこれも合わせて対応します。Pugファイルを検索するためにglobuleを使っていきます。globuleはワイルドカードでファイルを検索してくれます。],});この時、ignoreでinclude用のPugは除外しています。pugのテンプレート文法の多用とAtomicDesign採用Pugは閉じタグとかclassとid指定がCSSと同じだったりメリットがありますが、extendsやblockといった文法もかなりのメリットと思います。個人的に使いやすい形にしたPugファイル構造をまとめます。ディレクトリ構造にはAtomicDesignを採用。ページ固有のjs_layout.pugでは全ページに共通となるhead要素やbody内もheaderやfooterを記載したり、main要素にindex.pugのページごとの要素が流れ込む感じにしています。index.pugはorganismsのブロック要素などを組み合わせていく使い方を主にしています。利用規約や簡単で端的なページについては直接コーディングしてしまうこともありますが、どちらにも対応できるようにしています。どちらも/_includes/のPugファイルを参照して、かつ汎用パーツなどを流用できるようにしています。仕組み的にはNuxtなどのComponentに近い使い方ができています。Sassも同じようにしていますPugでAtomicDesignを採用していますが、Sassでも同じように採用しています。どちらも採用したのには理由があり、NuxtのComponentの構造では、VueファイルにHTMLとCSSが双方とも内蔵しており一括りにできましたが、今回はPugとSassと分けてしまっているためどのファイルでStyleしているのか迷子になりかねないです。そこで、双方にAtomicDesignを採用してディレクトリ構造とファイル名をPugとSass共に共通化することで解決してみました。(最終的に書き出すファイル)かなり冗長的になってしまっているかもしれないですが、Webサイトがかなりページ数が多くなって大規模になると結構みやすい設計になっていると思っています。screenのmax-widthの値もここで設定もしています。vw一例としてファイルを紹介しましたがこんな感じでPugとSassのディレクトリとファイルを設計してマークアップコーディングをしています。Viteを使用しているので、本来はmain.tsをうまく活用すべきなのかなと思いましたが、静的環境という点と過去に染み付いた手癖に合わせる感じになりました。ビルド時のファイル名のハッシュを辞める便利な機能ではありますが、場合によってはハッシュがない方が差分を取れるなど利点はある。ViteのrollupOptionsに設定があるのでこれを変更します。},画像やフォントなど区分けしておきたいファイルについてはif文で処理しています。まとめViteである必要があるのかと言われると難しいですが、個人的に動けばいいなと思っています。静的ページを作成するのはViteでなくてもできますが、他フレームワークよりは仕様を理解していなくてもPugとSassがわかっていれば使用できるぐらいの環境を流用できるのが個人的に良い落とし所になった気がします。先人様のナレッジを前提としての個人的備忘録として記事になりましたが、参考になったらと思います。https://zenn.dev/yend724/articles/20220408-tfq16buha8ctdzp7KidoYuta主にWebを中心としたデザインエンジニアです。個人的なナレッジを残したり面白いものがあれば共有します。DiscussionKidoYuta主にWebを中心としたデザインエンジニアです。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。