generator-iomante

A generator for Yeoman

npm install generator-iomante
16 downloads in the last week
32 downloads in the last month

generator-iomante

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

必要環境

まず 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

npm loves you