README
generator-iomante
Yeoman 用に作成した、静的サイト構築のためのスタートセット自動生成ジェネレータです。
バージョン
0.2.2
必要環境
まず Node.js をインストールし、npm を利用して Yeoman、Grunt、Bower をインストールします。
npm install -g yo grunt-cli bower
インストール
generator-iomante をインストールします。
npm install -g generator-iomante
これで以後は yo iomante で generator-iomante の機能を利用することが出来ます。
使い方
任意のディレクトリを作成し、yo iomante を実行します。この時、ルートディレクトリを整理するために、同時に grunt init も実行します。
mkdir sample
cd sample
yo iomante && grunt init
yo iomante を実行すると、対話式で以下の設定を行えます。
- プロジェクト名（実際にはローカルサーバ名として使用します）
- Font Awesome の利用有無
- 使用する jQuery のバージョン
- 開発用ディレクトリ名（Grunt や Sass など納品物には含まないリソースを配置するディレクトリです）
- 共通リソースディレクトリ名
- ドキュメントディレクトリ名（モジュール一覧やテンプレートなどを配置するディレクトリです）
設定が完了すると必要なファイルがインストールされ、同時に実行した grunt init によりファイルの再配置が行われ、ルートディレクトリが整理されます。
Grunt ファイルは _dev/grunt ディレクトリ内に配置されているので、移動後、Grunt コマンドを実行すると、Sass のコンパイルとファイルの監視、および設定したローカルサーバ名でブラウザにページを表示します。
cd _dev/grunt && grunt
ファイル構成
Grunt や Sass など、納品物には含まれないリソースはすべて _dev ディレクトリに配置されます。
_dev
└ grunt （Grunt 関連ファイルを配置。このディレクトリ内で `grunt` を実行します）
└ sass （Sass の実体ファイル一式を配置）
主な機能
- Sass のコンパイル
- CSS プロパティのソート
- 画像の最適化
- HTML 文法チェック
- CSS 文法チェック
- JS 文法チェック
- ファイル監視によるブラウザのオートリロード（別途、Chrome エクステンションが必要です）
- HTML ファイルと Sass ファイルの変更を監視し、ブラウザをオートリロードします