FrontNote

StyleGuide Generator Node.jsを使ったスタイルガイドジェネレーター

Version - バージョン

1.0.0

Usage - 使い方

First, install frontnote:

npm install frontnote --save-dev

var FrontNote = require('frontnote');
var note = new FrontNote({
	out: './docs'
});
note.render('path/**/*.css', function() {
	//callback
});

Plugins - プラグイン

Grunt - grunt-frontnote
Gulp - gulp-frontnote

API

FrontNote(options);

options

Type: Object Default value: {}

Option. Please see options section for more information.

オプション詳しくはオプションの項をご覧ください。

note.render(files,callback);

files

@Required
Type: String | Array
Pattern to be matched.
Please see the minimatch documentation for more details.

マッチさせたいパターン
詳しくはminimatchのドキュメントをご覧ください。

callback

Type: Function Default value: null

Call this function when generated style guide.

スタイルガイドが生成された後に実行するされる関数

Option - オプション

options.title

Type: String Default value: StyleGuide

Title of StyleGuide.

スタイルガイドのタイトル

ログを詳細に表示します

options.overview

Type: String Default value: __dirname + '/styleguide.md''

StyleGuide overview file's path. Overview file is required Markdown format.

index.htmlに表示するオーバービューファイル(マークダウン)のパス
オーバービューファイルはマークダウン形式です。

options.template

Type: String Default value: __dirname + '/template''

StyleGuide template path.

スタイルガイドのテンプレートパス

options.includeAssetPath

Type: String Default value: assets/**/*

The path of the file you want to copy the generated directory.

生成されたディレクトリにコピーしたいファイルパス

options.out

Type: String Default value: ./frontnote

Directory in which to generate a style guide.

options.css

Type: String|Array Default value: ./style.css

Path of CSS that you want to read in HTML. In the array or string.

HTMLに読み込みたいCSSのパス。文字列または配列で指定します。

options.script

Type: String|Array Default value: null

Path of JS that you want to read in HTML. In the array or string.

HTMLに読み込みたいJSのパス。文字列または配列で指定します。

options.clean

Type: Boolean Default value: false

Clean files and folder from options.out directory.

出力先ディレクトリとファイルを削除します。

options.verbose

Type: Boolean Default value: false

Display a detailed log

ログを詳細に表示します

Template - テンプレート

frontnote-template

テンプレートはfrontnote-templateを参考にカスタマイズできます

Comment Style - コメントの書き方

File overview - ファイル概要

Only 1 comment block in a file.
１ファイルに１つき１ブロックだけ記述できます。

/*
#overview
fileoverview title

fileoverview comment
*/

Section - セクション

Section of style guide. '@' means attribute of this section. (ex. @duplicated @todo)

各スタイルごとに記述します。
@をつけるとこのセクションに属性ラベルをつけることができます（例: @非推奨, $todo）

/*
#styleguide
style title

style comment.

@depulicated
@非推奨
@todo
@your-attribute

```
sample code here.
```
*/

Color Pallet - カラーパレット

Create color guide カラーガイドを作成します。

/*
#colors

@primary #996600
@secondary #333
@color-name color-code
*/

Difference of version 1.x and 0.x - バージョン1.xと0.xの違い

Some breaking changes - いくつかの仕様変更
New public function - 新しい関数の追加
render(filepath,callback);
Refactor to Testable code(Mocha testing) - テスタブルなコードにリファクタリング(Mochaによるテスト)
Enabled callback function - コールバック関数を実行できるようになった
Check coverage - カバレッジのチェックを追加
Minor bug fix - 軽微な不具合の修正

Breaking changes - 仕様変更

Change timing of output files.

version 0.x

var frontNote = require('frontnote');
frontNote('path/**/*.css',{
    out: './docs'
});	// <- Immediately output files.

version 1.x

var FrontNote = require('frontnote');
var note = new FrontNote({
    out: './docs'
});
note.render('path/**/*.css',function() { //<- output files.
	// callback
});

Test

npm install
npm test

seito2014/frontnote