Viteを使ったWeb制作環境を構築

このスクラップについて

Web制作用の環境としてビルドツール「Vite」を使ったものを構築していくメモ書き。
Gulpを使用していたが、新しいものが色々出ているので今更Gulpを勉強してカスタマイズするモチベが湧かなかったの。

目標

従来型Webサイト（複数ページを持つもの）のための開発環境の構築

目的

Gulp環境のリプレイス、開発環境の見直し、高速化

やりたいこと

• 複数ページのHTMLの書き出し
• Sassのコンパイル
• Sass・JSのバンドル
• HTMLファイルの分割（EJS）
• HTMLファイルに書いた変数を分割ファイルに渡す（meta情報などをHTMLファイルに書きたい）
• bodyもしくはmainタグにページごとのclassを付与したい
• サイト全体の情報をまとめ、EJSで読み込む（OGP用の本番パスなど）
• 本番サーバー用と開発サーバー用でfaviconやOGP画像のパスを分ける
• 見本用ファイルの準備
• ヘッダー・フッターのssi化のために、開発ではincludeしながらbuildコマンドで書き出す
• prettierの設定
• ESLintの設定
• Stylelintの設定
• PostCSSオプションの導入
• Markuplintの設定
• build後のHTMLを整形する
• storybookの導入
• scssのsoucemapを開発で出力する
• etc...
  チェック付きは実装ずみ

参考

基本の型

• https://qiita.com/soundweaver/items/78bd6a62263c397f43f5
• https://coding-memo.work/development/1274/
• https://zenn.dev/hiiiita/articles/a4881dab7226aa

EJS

• https://qiita.com/engineerhikaru/items/9b274ea3662f381e2266

開発用と本番用の条件分岐

• https://ja.vitejs.dev/guide/env-and-mode.html#modes

build時にCSS・JSの読み込みパスにパラメータを付与し、キャッシュバスターする

参考

• https://ja.vitejs.dev/guide/using-plugins.html#条件付きの適用
• https://zenn.dev/hiiiita/articles/a4881dab7226aa#cssとjsファイルに更新パラメータを自動で追加する
• https://itblogger-note.blogspot.com/2022/05/javascript-replace-multiple-elements.html

リンター・フォーマッターの導入

Markuplint,Stylelint,ESlint,prettier,Beautifyを導入

参考

• https://designsupply-web.com/media/programming/7648/
• https://designsupply-web.com/media/programming/7642/
• https://zenn.dev/hiiiita/articles/a4881dab7226aa#.jsbeautifyrcのファイルを作成（js-beautifyの設定）
• https://howdy.hatenablog.com/entry/2016/11/07/201159

画像の自動圧縮をSharpを使ってやりたい...