,

[Grunt & Yeoman] grunt-styleguide で CSS(StyleDocco) のドキュメントを生成する

公開日: 2013/11/19
更新日: 2019/09/19

grunt-styleguide は、CSSのドキュメント生成ツール。

grunt 2013-11-19 13-20-46

% grunt --version
grunt-cli v0.1.10
grunt v0.4.1

Contents

インストール

% npm install grunt-styleguide --save-dev

Gruntfile

css 以外にも scss 等も指定できる。

# grunt-styleguide
styleguide:
  prod:
    name: '<%= pkg.name %>'
    options:
      framework:
        name: 'styledocco'
    files:
      'docs/styleguide': 'src/sass/*.scss'

つかいかた

例えば、style.scss にmarkdownでコメントを追加する。

/*
# サイト名
 
サイト名を装飾する。
 
\```
<h1>サイト名</h1>
\```
*/
 
h1 {
  font-size: 4em;
  color: #f00;
}

※ 上記のコメント内のコード記述は、「```」three backticksです。

% grunt styleguide
Running "styleguide:prod" (styleguide) task
>> DEST: docs/styleguide/index.html
Done, without errors.
% open docs/styleguide/index.html

このような形で使われているようです。

補遺

参考

メモ