- CSS/JS/画像を用意するためのボイラープレートです
- Node.js を使用します
- モジュールバンドルとしてViteを使用します
- 各種設定は必要に応じて変更してください
- zip 形式で本リポジトリをダウンロード or
git clone xx
で別の名前をつけてclone - zip ファイルを解凍し、フォルダ名を任意のプロジェクト名に変更する or
git remote set-url origin xx
で任意のリポジトリに紐付ける - プロジェクトのディレクトリに移動し、
pnpm install
コマンドを実行してパッケージをインストールする - 必要に応じて、README.md や各種設定ファイルを編集する
pnpm image
やpnpm icon
で画像を加工してから、pnpm dev
で開発を始めるpnpm build
でdist
へ出力されるcss/style.css
とjs/app.js
等を個々のプロジェクトへ移動させて、ご利用ください
-
dev
開発用サーバーを立ち上げる。 -
build
ビルドする。
ビルド後の HTML ファイルは Prettier でフォーマットされる。 -
preview
ローカルで静的なサーバーを起動し、dist のファイルを localhost で配信する。プロダクションビルドが問題ないかどうかを自分のローカル環境で確認するために使用する。 -
lint
lint する。 -
fix
fix する。 -
image
src/images
内の画像をsrc/public/img
へ最適化、WebP 等を出力する。
dev
より先の実行を想定 -
icon
src/public/icons/icon.png
をリサイズ。750px * 750px から小さいものを生成
dev
より先の実行を想定
- Prettierを使用する
- 原則として、SCSS ファイルをコンパイルして生成した CSS ファイルを直接編集することは避けた方が良い
- EVERY LAYOUTをオレオレ解釈したObjectとComponent、utilityで構築することを想定
- Dart Sassを使用する
- PostCSSを使用する
- プラグインとして以下を使用する
- stylelintを使用する
- ベースのルールとしてstylelint-config-standard-scssを使用する
- Viteを使用する。
- ESLintを使用する
- ベースのルールとしてeslint:recommendedを使用する
- プラグインとして以下を使用する