ryuone's memo

備忘録

How to setup StyleDocco with Grunt

2013年1月9日にStyleDoccoの勉強会があったので、どのように環境構築したかを纏めておくのだ。(Unix系OSで構築)

StyleDoccoとは「スタイルシートからドキュメント/スタイルガイドを作成するツール」とある。

上記の様に、CSSを記述すると、コメントの部分(/* …. */)がドキュメントとして生成される。(StyleDoccoから引用)

StyleDocco(0.6.2)からは /** …. */ が処理対象になるみたい。

1 前提

Node.JS(0.8.16)がインストールされていて、以下1.1のパッケージがglobalにインストールされていて、1.2がプロジェクト内のnode_modulesにリンクされている事を前提とする。

1.1 npm install -gによるインストール

  • grunt(v0.3.17)
  • styledocco(0.6.1)
  • grunt-contrib(0.3.0)
  • grunt-compass(0.3.7)
  • grunt-styleguide(0.2.1)

1.2 npm lnによるリンク

  • grunt-contrib(0.3.0)
  • grunt-compass(0.3.7)
  • grunt-styleguide(0.2.1)

2 grunt.jsの作成

プロジェクトディレクトリを作成してから、grunt init:gruntfileでgrunt.jsを生成する。

2.1 プロジェクトディレクトリ作成

%はShellの一部

2.2 grunt.js作成

デフォルトのまま、すべてリターンで次に進む。

3 package.jsの作成

今回は何も入力せずに、すべてリターンで次に進む。

dependenciesはnode_modulesにリンクされているパッケージを自動で設定してくれる。

4 grunt.jsにタスクロード処理を追加

module.exports = function(grunt) {}の関数内に以下を記述する。

5 grunt.jsにcompassのタスク処理を追加

5.1 scssファイル格納ディレクトリと、CSSファイル格納ディレクトリを作成する。

grunt.jsファイルが存在するディレクトリで、以下のコマンド実行してディレクトリを作成する。

6 styleguideの設定を追加

以下の設定の内、styleguide.styledocco.optionはデフォルトなので、削除しても問題ない。
ドキュメントの出力先は、styleguide.styledocco.filesのsrc/docsに出力される。ドキュメントの生成元は、src/scss/*.scssとなる。

7 watchの設定を追加

下記、設定を追加する事により、grunt watchコマンドで、src/scss/*.scssを監視して、変更があればcompassの処理を行いstyleguide(styledocco)の処理を行う。

8 defaultのタスクを変更


以上で、styledoccoを実行する設定は終了。

あとは、src/scss内の*.scssを作成 or 修正してgruntとコマンドを叩けば、defaultのタスクが実行されasset/cssにcssが生成され、src/docsにstyledoccoのドキュメントが生成される。
grunt watchコマンドを実行しても同様にファイルの変更を検知したらwatchのタスクが実行される。


mincssの設定

下記設定を追加すると、grunt mincssコマンド実行時に、’asset/css/*.css’をMinifyしたasset/css/min/all.cssを生成する。


気になる

参考にさせて頂いたサイト

Pocket
Delicious にシェア

, ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください