gulp で スタイルガイド を作成します。
frontnote というのが良さそうなので試してみます。
今年時点でめっちゃいい記事ありました。
こりゃ記事を書く必要ないなー。
手順通りやればできると思うので以下はスタイルガイド についてです。
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は↑で指定したものが読み込まれるので、スタイルガイド のために別でファイルを作るというのも全然ありだと思います。
コメントは圧縮すれば消えると思うので、製作時にこまめに記述していくのもありなのかもしれません。
