プロジェクト内のjavascriptやcssを自動監視して, 変更があるたびにまとめて連結・圧縮してくれるMac専用のGUIツール CodeKit。
有料だし, 最近はGruntみたいにCUIで同等の機能を持ったのも出てきていますが, この手軽さはなかなか捨てがたいかと思います。
日本語の情報があまり無かったので備忘録。
javascriptの連結
CSS(LESS/SASS含む)はimport文を書いておけばCodekit側で自動判別してまとめて一つのcssファイルにしてくれますが, jsはそうはいきません。
たくさんあるjavascriptファイルを最終的に一つのファイルに連結して欲しいときは, 以下の構文が使えます。
@codekit-prepend "someFile.js"
または
@codekit-append "someFile.js"
これをjavascriptファイル内に記載すると, prependは上, appendは下側に該当のjsファイルを連結して吐き出してくれます。
順序も意識できますし, 相対パスで他のディレクトリにあるファイルも連結対象に含めることができます。
注: 上記の記述は, jsファイル内ではコメントアウトして記述してください！
JetBrains系のIDE使用時の注意点
Codekitは一度プロジェクトをD&Dするとあとは自動でファイルの変更を追尾してjsやcssを吐き出してくれる優れモノなのですが, PhpStormやPycharm, RubyMineのようなJeBrains系IDEを開発に使っている場合は注意が必要です。
これらのIDE自身もファイルの変更を監視していてCtrl+Sで保存をしなくても勝手に裏で保存しているため, 少し変更しただけでCodekitが動き, ブラウザがリロードされる…という自体に陥って, 結構鬱陶しく感じるかと思います。
これを防止するためには, IDEの設定→Generalの項目で
"Use safe write"のチェックをオフに
すると良いです。
こうすればCtrl+Sを押したタイミングでCodekitが走るようになります。（そのかわりSafe Writeでなくなっているので, IDEが落ちてしまった時のことを考えるてマメに保存するようにした方が良いと思います。）