CSS の自動整形・解析をするツールの紹介

Shota Kubota / @kubosho_

自己紹介

kubosho_

(自称) CSS オジサン

ブログ: I'm kubosho_

Twitter: kubosho_

GitHub: kubosho

イカID: kubosh0

もくもく会やってます

W3C CSS Module 仕様書もくもく会@東京

作ったもの

Steins;Git
Steins;Gate の世界観で Git を説明する同人誌

Nico
Honoka を元にした日本語も美しく表示できる Bootstrap テーマ

Nozomi
高品質な CSS を書くための助けになるかもしれない gulp ワークフロー

CSS の自動整形・解析をするツールを作りました

Kotori

github.com/kubosho/kotori

Kotori って何?

CSS を自動的に整形・解析するツール

stylelint, Autoprefixer, CSSfmt, clean-css, StyleStats を内包している

Kotori って何?

概念としては「CSS 版 imageOptim」

なぜ Kotori を作ったのか?

自分が仕事で関わっている案件の CSS がカオスだったので、どうにかしたかったから

なぜ Kotori を作ったのか?

gulp や PostCSS を組み合わせれば同じようなことはできるが、ひとまとめにしたツールがあるほうが楽だから

gulpfile.js を直接触るより設定ファイルを触るほうが楽だから

なぜ Kotori を作ったのか?

ECMAScript 2015 やそれ以降に触れておかないという危機感があったから

CLI 上で動作するツールを、一度は作りたかったから

なぜ Kotori を作ったのか?

μ's のメンバーの名前を冠したライブラリやツールを増やしたかったから

開発で使っている npm packages

  • Babel
  • chokidar (依存している fsevents のインストールが遅くて辛いので取り除く予定)
  • ESDoc
  • moment
  • optionator
  • through2 (Node.js 本体の stream に置換する予定)

開発で使っている npm packages (テスト編)

  • istanbul + Coveralls
  • ESLint
  • mocha
  • espower-babel
  • power-assert

開発で使っているサービス

  • Travis CI + AppVeyor
  • Code Climate
  • Coveralls
  • GitHub
  • Slack

デモ

終わり

- Kotori: kubosho/kotori
- ブログ: I'm kubosho_
- Twitter: kubosho_
- GitHub: kubosho