クライアントサイド開発環境 for Mac OS X

開発環境構築

この記事は以下の記事の終了を前提としています

開発環境構築 for Mac OS X · kawazrepos/third-impact Wiki

nodebrewのインストール

クライアントサイド開発のためにnodebrewを導入します。

これはnodeという、CUIでJavaScriptを実行するものを簡単に導入することができるユーティリティです。

$ curl -L git.io/nodebrew | perl - setup
$ export PATH=$HOME/.nodebrew/current/bin:$PATH

nodeのインストール

今入れたnodebrewを使ってnodeを入れてみましょう。 v0.10.28は2014/5現在のstableなバージョンです。

$ nodebrew install-binary v0.10.28
$ nodebrew use v0.10.28

依存パッケージのインストール

npm(node package manager)というnode製のライブラリを簡単に導入するツールを使ってLESSとCoffeeScriptを導入する

$ npm install -g coffee-script
$ npm install -g less

これで必要なものが導入されたはずです！

CoffeeScript

src/statics/coffee内のファイルが変更されると、自動的にCoffeeScriptをJavaScriptにコンパイルし、src/statics/js内に保存します。

LESS

src/statics/less内のファイルが変更されると、自動的にLESSをCSSにコンパイルし、src/statics/css内に保存します。

LiveReload

LiveReloadは、あるファイルが更新されたときに、自動的にブラウザを更新してくれる神ブラウザ拡張です。

これを入れておくと、JS(Coffee), CSS(LESS), HTMLが更新されたときに、何も押さなくても自動的にページを再描画してくれます。めっちゃ便利。

LiveReloadの導入

Google Chromeの拡張として提供されているため、ブラウザにインストールしてください。

Chrome Web Store - LiveReload

ブラウザの右上にアイコンが増えるので、localhost:8000/でクリックして、有効な状態にしてください。

その後、honchoを走らせ、該当のファイルを更新すると、即座にブラウザがリロードされます。

さらに、CSSが更新された場合は、ページ自体は更新されずにCSSだけを再読込してくれる頭の良さなので、シームレスに変更結果を確認できます。