aigisをgulpで使ってみる

スタイルガイドジェネレータのaigisをGulpで使ってみます。

使い方

Gulpの環境を用意して、gulp-aigisをインストールします。
今回はSassも使うので、gulp-sassも合わせてインストールします。

npm install gulp-aigis --save-dev
npm install gulp-sass --save-dev

以下コマンドを実行して、aigisの設定ファイルとテンプレートファイルを用意します。

node_modules\gulp-aigis\node_modules\.bin\aigis init --engine jade

完了すると、現在のファイル構成は以下のようになっているかと思います。

• aigis_assets
• node_modules
• template_jade
• aigis_config.yml
• package.json

今回Sassファイルを使用するので、aigisの設定ファイルを一部変更しておきます。

aigis_config.yml

source: ./aigis_assets
↓
source: ./sass

これでsassディレクトリ以下のファイルを参照するようになりました。

次にSassファイルを用意します。
sassディレクトリを作成して、以下の3ファイルを追加します。

style.scss

@import "button";
@import "list";

_button.scss

/*
---
name: button
category: button
---

## ベースのボタン

`a` か `button` タグが使えます。

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

## 色の変更

```html
<button class="btn">Button</button>
<button class="btn btn-a">Button</button>
<button class="btn btn-b">Button</button>
<button class="btn btn-c">Button</button>
```
*/

.btn {
  /* buttonタグのリセット */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;

  border-radius: 3px;
  padding: 5px 10px;
  color: #ffffff;
  font-size: 14px;
  background: #000000;

  &-a {
    background: #E74C3C;
  }
  &-b {
    background: #3498DB;
  }
  &-c {
    background: #2ECC71;
  }
}

_list.scss

/*
---
name: list
category: list
---

## リスト

```html
<ul class="list">
  <li class="list__item">List</li>
  <li class="list__item">List</li>
  <li class="list__item">List</li>
</ul>
```
*/

.list {
  margin: 0;
  padding-left: 0;
  border-top: #000000 1px solid;
  &__item {
    list-style: none;
    border-bottom: #000000 1px solid;
    padding: 10px;
  }
}

これでSassの用意が完了しました。

次にgulpfile.jsを用意します。

gulpfile.js

var gulp  = require('gulp'),
    sass  = require('gulp-sass'),
    aigis = require('gulp-aigis');

gulp.task('sass', function () {
  gulp.src(['./sass/**/*.scss', '!./sass/**/_*.scss'])
  .pipe(sass({
    outputStyle: 'compressed'
  }))
  .pipe(gulp.dest('./css/'));
});

gulp.task('aigis', function() {
  gulp.src('./aigis_config.yml')
    .pipe(aigis());
});

Sassコンパイル後はプロジェクトルートのcssディレクトリに生成するようにしました。
このコンパイル後のcssファイルをスタイルガイド内でも読み込みたいので、template_jade内のindex.jadeの以下部分を変更します。

index.jade

link(href=root + 'css/style.css', rel='stylesheet')
↓
link(href=root + '../css/style.css', rel='stylesheet')

デフォルトだとstyleguideディレクトリ内を見るようになっているので、一階層上を見るように変更しました。

これで準備は一通り完了なので、実際に試してみます。
まずはSassをコンパイルします。

gulp sass

cssディレクトリが生成されて、中にstyle.cssが追加されていればOKです。
style.css内は以下のようになっています。

style.css

.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;outline:none;background:transparent;border-radius:3px;padding:5px 10px;color:#ffffff;font-size:14px;background:#000000}.btn-a{background:#E74C3C}.btn-b{background:#3498DB}.btn-c{background:#2ECC71}.list{margin:0;padding-left:0;border-top:#000000 1px solid}.list__item{list-style:none;border-bottom:#000000 1px solid;padding:10px}

次にスタイルガイドの生成を試してみます。

gulp aigis

styleguideディレクトリが生成されたらOKです。
以下のようなスタイルガイドが生成できました。
スタイルガイドのデモページ

最終的なファイル構成は以下のようになります。

• aigis_assets
• css
• node_modules
• sass
  • _button.scss
  • _list.scss
  • style.scss
• styleguide
• template_jade
• aigis_config.yml
• gulpfile.js
• package.json

【参考サイト】

• aigis – CSS Styleguide Generator