generator-iomante v0.2.2

generator-iomante

Yeoman 用に作成した、静的サイト構築のためのスタートセット自動生成ジェネレータです。

バージョン

0.2.2

必要環境

• Node.js
• Yeoman
• Grunt
• Bower

まず 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 ファイルの変更を監視し、ブラウザをオートリロードします

ライセンス

MIT License