Codekitを使ってみたら超絶便利だった件。

最近CSSメタ言語を使用している人が増えていると思いますが、コンパイルする環境を整えるのが面倒だったり苦手で手を出してない人も多いのではないでしょうか?

SassだとRubyを入れて、Stylusだとnode.jsを入れて、、など環境整えるのって僕も苦手です。

そこでMac Lion以降のみ対応ですが、Codekitというアプリが超絶便利すぎるので使い方をまとめてみました。

ブログを書いている時点でのCodekitのバージョンはVersion 1.0 (6010)

Codekit

コンパイルできるファイル

  • less
  • sass/scss
  • stylus
  • haml
  • jade
  • javascript
  • coffee script

これだけの言語?をコンパイルすることができます。とりあえず入れとけ!って感じの対応数です。

ブラウザの自動リロード

これだけの為に入れてもいいくらい便利な機能です。対象ファイルが変更されると自動でSafariかChromeで開いている該当ページで変更のあったファイルをリロードしてくれます。

CSSやJSの場合は読み込んでいるファイルのみリロードしてくれるので無駄な待ち時間も発生しません!

guard-livereloadを使って同じことをしてましたが、こちらの方が簡単でいいです。

コンパイルでデバッグ!

当たり前なのかもしれませんが、Sass/Less/Stylusなどコンパイル時にエラーがあれば分かりやすく表示してくれます。

コンパイルしないJSやCSSのも監視対象に入れておけば、ファイル変更時にエラーがあれば表示してくれます。
オプションでデバッグ内容をある程度細かく指定出来たり、使っているライブラリを選ぶとそのライブラリの記述用のデバッグもしてくれるみたい。

いろいろオプションがあるので把握しきれてないですが、GUIが分かりやすいのでちょっと使えばすぐ覚えそうな感じです。

コンパイルオプションで圧縮

sassやらlessやら使っている人にはおなじみかと思いますが、コンパイル時に圧縮するかどうかもチェックボックス一つで選ぶことができます。

圧縮もファイルによって選べる内容が違うので好みに設定しておくといいかもです。

まとめ

ざっくりまとめてみましたが、めちゃくちゃ便利です。

今のところベータ版なのでフリーで使うことができますが、シェアになっても間違いなく買っちゃいますね。

似たようなアプリにLiveReloadというのもありましたが、シェアウェアで試用も出来ないのが残念。。。

余談ですが、FAQのここが個人的にツボでした。

I’m on Windows. What do you recommend I use to work with Less/Sass/CoffeeScript, etc?

A Mac.

Codekitを使ってみたら超絶便利だった件。

コメントを残す

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