ライフハック

gulp でsassをコンパイルしつつ、スタイルガイド を作成してみる

gulp で スタイルガイド を作成します。
frontnote というのが良さそうなので試してみます。

今年時点でめっちゃいい記事ありました。

https://ics.media/entry/3290

こりゃ記事を書く必要ないなー。
手順通りやればできると思うので以下はスタイルガイド についてです。

frontnoteの導入

npm install --save-dev gulp-frontnote

これでインストールできます。

gulpファイルに以下を追記

var frontNote = require('gulp-frontnote');
gulp.task('doc', function() {
  gulp.src('sass/**/*.scss') //scssファイルの場所
    .pipe(frontNote({
      out: './_styleguide', //生成ファイルの場所
      css: ['../css/style.css'] //cssファイルの場所
    }));
});

どうやらSCSSファイルのコメント元に文書が作られるようです。
下のCSSはスタイルガイドに実際に読み込まれるものです。

少し触ってみてわかったこと

.scssファイルを基にしてスタイルガイドページが生成されます。
タブを増やしたい場合は.scssファイルを追加すればいいです。
1ファイル1タブです。

コメント内で、マークダウンっぽい記述で文書を作っていきます。

_parts.scss

/*
#overview
パーツ素材
*/

/*
#styleguide
ボタン

.btn
ボタンです。aタグにつけてください。

@エレメント

```
<a href="" class="btn">ボタン</a>

```
*/

/*
#styleguide
文書

Pタグを使ってください

@エレメント

```
<p>Pタグです</p>

```
*/

上記のようなコメントを書いてください。
#overviewの下のコメントがページの見出し。
#styleguideの下の文が項目の見出しっぽくレイアウトされます。
colorを簡単に表示したりなどもできるみたいです。

項目ごとにコメントを分けないといけないっぽい?たぶん。

.scssはコメントの中身のみ読み取られる感じです。cssの記述はページ生成に影響ありません。
実際のcssは↑で指定したものが読み込まれるので、スタイルガイド のために別でファイルを作るというのも全然ありだと思います。
コメントは圧縮すれば消えると思うので、製作時にこまめに記述していくのもありなのかもしれません。