gulpで作るスタイルガイドをFrontNoteにした
みなさん、スタイルガイドは使ってますか。
私は今年になって使い始めました。
これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。
乗り換えたスタイルガイドジェネレーターは「frontNote」です。
FrontNoteとは
FrontnoteはNode.js製のスタイルガイドジェネレータです。
このスタイルガイドジェネレーターはKSSをインスパイアして開発されたものです。
KSSにない機能としてスタイル全体の概要、カラーパレット、スタイルに任意のラベル付けの機能があります。
スライド-CSS Living StyleGuide
公式にGulp.js・Grunt.jsのプラグインもあり、簡単にスタイルガイド作成を自動化することができます。
FrontNote-gulp
FrontNoteがイケてるところ
- scssでもCSSでコンパイル設計の対象にできる
-
他のスタイルガイドの生成ツールを見てるとSASSが使えない、対応するのに一苦労しそうなのがあった中簡単に対応できて使いやすいです。
SASSを対象にできるとSCSS内のコメントでスタイルガイドのコードを書いた時、CSSをコンパイルするときMinifineしてスタイルガイド用の記述削除できるので運用面でも使いやすくなります。
- 自分のCSS設計に合う(flocssベース)
-
スタイルガイドを作るためにCSSの設計をあわせる必要がなかった。
styledoccoではそれが私の場合あったので、FrontNoteのほうが汎用性があると判断した
- オプションの追加が簡単
- githubにoption周りの事が書いてあり、プログラムのわからない私でも理解できる範囲だったので、使いやすいと判断しました。
- ナビゲーションの区分けが便利
- 出力したサイトのナビゲーション名前などはファイル名に依存せずに変更できるので汎用性が高いと判断した。
- ゴミファイルが出来ない（生成するページが指定しやすい）
- もともとのコメントの書き方に依存すると思うのですが、FrontNoteでは意図しないスタイルガイドのコメントが入ることが無かったので気に入っています。
- JSも読み込める
- JSも読み込める（読み込むファイルを指定できる）のでtoggleなどのUIもスタイルガイドジェネレータで実装ができる。素敵。
- 作者が日本人
- 何かあったときに相談できそう＆日本語のドキュメントがあるので人にも薦めやすい。
使い方
githubに上がっているのでその通りにやれば動きます。
FrontNote-github
※node.js、gulpは事前にインストールしてある前提です。
npm install frontnote --save-dev
gulpfile.jsに下記を追加。
var frontNote = require('gulp-frontnote');
gulp.src('src/**/*.css')
.pipe(frontNote({
// options
}));
私専用汎用gulpでも組み込んでます。
ぼっち専用gulp
※怖くないプルリクは歡迎です。
最後に
StyleGuideはとても大事なものです。
それはチームだけでなく、個人の案件でも同じことです。（2週間も立ったら自分の書いたコードも忘れます…）
コーディング規約やスタイルガイドのない案件は運用していくうちにCSSが腐ってしまいます。
CSSは生物です、ちゃんとメンテナンスをしてあげましょう。
とは言うものの私もこのブログでスタイルガイド作れていないので、ちょっとずつ整理していきます…。
当ブログのスタイルガイド（制作途中）
新人のコーダーさんに「CSSなんですぐ死んでしまうん…」なんて言わせない文化を築きましょうね(*ゝω・*)
追記
Front Note使ってたのですがaigisに乗り換えました。
昔は導入しにくかったけど、今は導入も簡単です。よかったらこちらも参考にしてください
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました