開発環境について

UTSUWA テーマでは、SCSS を CSS に変換するために webpack の開発環境を同梱しています。詳しく知りたい場合は公式テーマの webpack ビルド環境の使い方をご覧ください。また、webpack を使用せず、使い慣れたコンパイルツールを使って SCSS を CSS に変換してもかまいません。

使い方

1. themes/utsuwa で npm installして UTSUWA で使用している全てのパッケージをインストールする
2. その後、npm run start または npm run dev で開発を開始する（JS や CSS が 1 つにまとめたり、SCSS を CSS に自動で変換します）
3. リリースできるようになったら、npm run build でビルドする

マシンに node.js が入っていない方は npm コマンドが使えないため、公式サイトからインストールしてください。 .node-version に記載しているバージョンと同じバージョンをインストールしてください。

package.json

package.json には UTSUWA で使用できるコマンドと使用しているパッケージがリストされています。

以下、一部の設定について紹介します。

package.json の config

• local ... 後述する npm run start のライブリロードで使用します。開発環境を表示しているドメインなどあれば記入してください。
• theme ... 使用しているテーマを記述します

package.json の scripts

• npm run build ... リリース用の CSS と JS を書き出します
• npm run dev ... 開発時用の CSS と JS を書き出します。（ソースマップを書き出すので、開発者ツール上からどの SCSS ファイルのコードかわかります）
• npm run start ... dev の機能に加えて、さらにライブリロードを行います
• npm run analyze ... 結合したファイルの各パッケージがどのくらいの容量を占めているか可視化してくれる機能です。

webpack

• webpack.analyze.js ... バンドルファイル内の各パッケージがどのくらいの容量を占めているか知りたい
• webpack.common.js ... 各 script 実行時に共通のファイルです。
• webpack.dev.js ... 開発中のタスクに使用する
• webpack.prod.js ... リリース時のタスクに使用する

不可視ファイル

• .babel.config.js ... Babel の設定ファイル（JS 関係）
• .editorconfig ... 自動で整形してくれる editorconfig の設定ファイル
• .eslintrc ... ESLint の設定ファイル（JS 関係）
• .gitignore ... Git で管理しないものを設定するファイル
• .node-version ... node.js のバージョンを管理するファイル。開発時に使用された Node.js のバージョンが記載されており、nodenv などのバージョン管理ツール使用時に適用されます。
• .stylelintrc ... StyleLint の設定ファイル（SCSS、CSS 関係）