Quick Start

aigisの持つ機能を簡単に試す方法を紹介します。（一番簡単な方法はaigisのexampleを試すことです。）

node-aigisのインストール

aigisのインストールはNPMで行います。ターミナルから次のコマンドでnode-aigisをインストールします。

$ npm install --save-dev node-aigis

そしてaigisが正しくインストールされているか、次のコマンドを実行して確認します。x.x.xのようなバージョン番号が表示されれば正しくインストールされています。

$ ./node_modules/.bin/aigis -v
$ 1.0.0

コンフィグファイルとHTMLテンプレートの作成

スタイルガイドの生成にはコンフィグファイルと、HTMLテンプレートが必要です。
aigisではinitコマンドを実行することで、コンフィグファイルとテンプレートのひな形を利用することができます。

$ ./node_modules/.bin/aigis init
Created the following files and directories:
  aigis_config.yml
  aigis_assets
  template_ejs

テンプレートエンジンの選択

aigisでは３つのテンプレートエンジンが利用できます。aigis initを実行する際に--engineオプションで利用するテンプレートエンジンを指定できます。

利用できるテンプレートエンジンと値

EJS（ejs）

Jade（jade）

Handlebars（hbs）

例）テンプレートエンジンにJadeを利用する場合
$ ./node_modules/.bin/aigis init --engine jade

コンフィグファイルの編集

initで生成されたaigis_config.ymlを編集して、sourceの項目にスタイルガイドの元となるファイルを指定します。

例えばstyle.cssを元にスタイルガイドを生成したい場合source: ./style.cssのように指定します。

sourceの指定方法

sourceはファイルとフォルダのどちらでも指定できます。次のように配列の形で指定することもできます。
source:
  - ./lib/css
  - ./style.css
initで生成されたaigis_config.ymlでは、sourceとしてテーマで使われているCSSが指定されています。そのままaigisを実行することで、テーマのスタイルガイドを生成することができます。

CSSにコメントを追加する

sourceに指定したCSSファイルに、スタイルガイド用のコメントを追加します。

CSSのコメントブロック（/* ~ */）に次のようなスタイルガイド生成用のコメントを追加します。

---
name: base button
category: module/button
---

## This is base button

* Base button style.
* Use `a` or `button` tag.

```html
<a class="btn">Button</a>
```

これはとてもシンプルなドキュメントコメントです。ドキュメントコメントの詳細については次のドキュメントを参照してください。

aigisの実行

次のコマンドでaigisを実行してスタイルガイドを生成します。

$ ./node_modules/.bin/aigis run -c ./aigis_config.yml

ドキュメントコメントから次のようなスタイルガイドが生成されます。

サンプル

-cオプション無しでrunコマンドが実行されたとき、aigisは実行されたディレクトリからaigis_config.ymlを探して実行します。

initで生成された./aigis_assets/css/theme.cssにスタイルガイド用のコメントが記述してあります。また、node-aigisのパッケージにはexamplesがありますので、合わせて参考にしてみてください。

ほか、aigisの詳しい機能についてはドキュメントを参照してください。