grunt + styledocco + scss (compass)

memo.markdown

repo

• scssからdoc作る(cssは作らない)
• scssからdoc作る(cssも作る)

require

• Grunt
• grunt-contrib-watch
• grunt-contrib-sass
• grunt-style-guide
• Bourbon
• compass

install

npm install grunt-styleguide --save-dev

npm install -fg styledocco

bundlerで必要なgemをインストールする

bundle install --without=production --path vendor/bundle

---

--pathでローカルにインストールした場合はつけてコマンド実行しないといけない。

bundle exec compass

Gruntfileのタスク上では、bundleExec: trueにすると bundle exec compass で実行してくれる。

    compass: {
      dev: {
        options: {
          bundleExec: true,
          config: 'compass_config.rb',
          environment: 'development'
        }
      }
    },

---

gem install bourbon
gem install compass
rbenv rehash
mkdir lib
cd lib
bourbon install

Tips

bundleでプロジェクトローカルにインストールしたcompassを使う

ドキュメントには書いていないが styleguide.styledocco.options.framework.options.preprocessorが スタイルガイド用のSCSS(LESS)をコンパイルする部分なので上書きする。

    styleguide: {
      styledocco: {
        options: {
          name: 'Project Name',
          framework: {
            name: 'styledocco',
            options: {
              preprocessor: 'bundle exec sass --compass'
            }
          }
        },
        src: [
          // サブディレクトリも含めドキュメント化
          'htdocs/common/css/**/*.scss',
          // ライブラリなどは除外
          '!htdocs/common/css/vendor/**/*.scss'
        ],
        dest: 'htdocs/docs'
      }
    },

ドキュメントに反映されるコメント、されないコメント

/*このコメントはドキュメントに反映される */

/* このコメントはドキュメントに反映される */

//このコメントはドキュメントに反映される

// このコメントはドキュメントに反映される

 /* 行の頭に半角空白が入ると、このコメントはドキュメントに反映されない */
 // 行の頭に半角空白が入ると、このコメントはドキュメントに反映されない

  /* 行の頭にタブ文字が入ると、このコメントはドキュメントに反映されない */

a{}/* 行の頭に何かしら文字が入ると、このコメントはドキュメントに反映されない */

/*
 * このコメントは生成時にエラーが出る
 */

ドキュメントの右上の検索窓

scssのファイルリストの検索。 ドキュメント内の文字列からの検索ではない。

ドキュメントの右上の見出し一覧

見出しレベルごとにネストなどの強調がないので若干見づらい

参考にしているサイト

• StyleDoccoによるCSSスタイルガイドの導入
• styledoccoのドキュメント少なすぎだろ