Macのターミナル（通称：黒い画面）でWeb制作の環境を構築する手順メモ。とりあえずCSS Preprocessorとかが使えるようにするところまで。ちなみにOSX 10.8.2です。
書いている本人はこのへん初心者で、これは別にベストな方法ではなく、間違いもあるかもしれません。さらに失敗した手順もメモとして残しています。上から順にやっていくと同じところで同じように失敗します（笑）ので、試すときは一読してからどうぞ。
- dont-be-afraid-kuroigamen « FJORD, LLC（合同会社フィヨルド）
- OS Xを最新のWeb開発環境にする下準備 | A Memorandum
- A Node in Nodes - 10分でわかるjadeテンプレートエンジン
- Sass と Stylus の比較 CSS Preprocessor Advent Calendar 2012｜Web Design KOJIKA17
- Jade Syntax Documentation by example
- コマンドは最低cdだけ使えれば何とかなる
- コマンドのよくある解説で、先頭に $ が付いてるけどそれは入力しなくていい
- cdの後に半角スペース入れてFinderからフォルダをドロップしたら、そこまでのパスが書ける
- ターミナルのウィンドウのタイトルバーに現在のディレクトリ名が出てる
App Storeから普通にインストール。でかいアプリなので時間がかかる。
2015.09.10_追記：Yosemiteからは、Xcodeを入れなくても、ターミナルからでインストールできる模様。詳しくはYosemiteにコマンドラインツールを入れる - からぶんを参照。
XcodeからCommand Line Toolsをインストール。Installing Command Line Tools on OS X Mountain Lion - agwの日記 を参考に。
Homebrew。最下部の「Install Homebrew」のコードをターミナルに貼り付ける。
brew -v
でバージョン確認。0.9.3 だった。
Node.jsをインストールするために、Nodebrewをまずインストール。hokaccha/nodebrew · GitHubから。まずはREADMEを読む。
インストールはすぐ終わる。パスを通しなさいと言ってくる。.bashrcというファイルをviで開いてexport以下を書き込めばいいらしい。
cd ~
ls -a
ホームディレクトリに移動し、不可視ファイル含めファイルを確認。.bashrcは存在しない模様。viを起動。
vi
viのマニュアルは viの使い方/基本操作 参照。
- i でINSERTモードに
- export以下のパスをコピペ
- Escキーでコマンドモードに
- :w .bashrc で.bashrcというファイル名で新規保存
- :q でvi終了
- ls -a でファイルができているか確認
設定ファイル（.bashrc）リロードする
source ~/.bashrc
特に何も起こらない。nodebrewがインストールされたか確認する。
nodebrew help
v0.6.0でした。ターミナル再起動してもう一度確認。
nodebrew: command not found
あれ？
.bashrcにはパスは書き込まれているが、読み込まれていない感じ。どうも自動では読み込まない設定のようだ（Mac Terminalでbash alias — DejavuZ.COM）。なんだそれ。.bash_profileを作って以下の記述をして保存する。
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
再度確認。ターミナル再起動してもOK。ほっ。
Nodebrewが入ったらNode.jsへ。
nodebrew install stable
で安定版をインストール
node -v
でバージョンチェック
node: command not found
とか言われる・・・。
nodebrew help
で nodebrew list のコマンドを見つける。入力してみよう。
nodebrew list
すると
v0.8.16
current: none
Node.jsは入っているが利用可能状態になっていないってことかな。
nodebrew use v0.8.16
として選択。
use v0.8.16
と出る。再度バージョン確認。OK。
以下は Sass入門 を参考に進めている。
ruby -v
でRubyのバージョンチェック。1.8.7。安定版の最新のようなのでこのまま。
gem -v
でRubyGemのバージョンチェック。1.3.6。公式サイトを見ると1.8.24が最新のようなのでアップデートを試みる。1.3系と1.8系があるのかな？
sudo gem update --system
RubyGems 1.8.24 installedって出た。いけたっぽい。続いてSassを入れる。
sudo gem install sass
入ったらバージョンチェック。
sass -v
3.2.3はいりました。適当なSassファイルをコンパイルしてみる。cdでプロジェクトフォルダに移動して、sassフォルダ（Sassファイルを入れておく）とcssフォルダを用意。
sass --watch sass:css --style expanded
無事CSSが出力された。Ctrl+Cでwatchを終了。
とりあえずCompassの環境を作ってみる。Compassの解説は、CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 とかに。
gem install compass
ってしてみたけど
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions into the /Library/Ruby/Gems/1.8 directory.
って出るので sudo 付けてみよう。
sudo gem install compass
いけた。バージョンは0.12.2の模様。適当なディレクトリに移動して
compass create
で関連ファイルが生成された。
compass watch
で監視させつつ、適当にSCSS書いて保存してコンパイルもOK。Ctrl+Cで終了。
Bower。Webの制作に必要なライブラリとかをコマンド一発で探して落として指定の場所に展開してくれる、なんだか便利なやつらしい。入れてみることにする。
npm install bower -g
入った。バージョンは0.6.8。npmが入ってないよって怒られるかなと思ったが、Node.jsを入れたときに（？）入ってたみたい。適当なディレクトリに移動して
bower install jquery
ってやると、jQueryを入れてくれる。
開発環境として、こもりさんから教えてもらったrootsを入れてみる。
npm install roots -g
問題なく入った。ライブリロードは便利。jadeとstylusに標準で対応しているっぽい。
rootsを入れてみたんだがjadeのコンパイルにルールがあることに気付いて手に負えなくなってきたので、jadeだけ入れてみることに。
npm install jade
入ったかなぁと思って
jade --version
とやってみるも
jade: command not found
あれ？A Node in Nodes - 10分でわかるjadeテンプレートエンジンを参考に、
npm install -g jade
としてみてバージョンチェック。バージョン0.27.7でした。コンパイルもOK。でも圧縮されちゃって読みにくい・・・。記事にあるように「-o {pretty:true}」オプションは効かない模様。えー。でもオプションは -P でいけると小西さんが教えてくれた。
あと、自動コンパイルは
jade hoge.jade --watch
とすればできるんだけど、ファイル名指定のみでフォルダ単位にはできないっぽい。ぐぬぬ。
続いてStylus。公式には
npm install stylus
でOKってあるんだけど、jadeと同じく
npm install -g stylus
というようにオプション付けないとダメっぽかった。バージョンは0.31.0。ディレクトリに移動して
stylus --watch
すると同名ファイルが随時コンパイルされる。こっちはjadeと違ってフォルダ単位で監視できる。
スタイルガイドを生成してくれるstyleDoccoを入れてみる。コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog に書いてある通りに進めて問題なくできた（とりあえずgrunt.jsはまだ）。
- Gruntってやつを使えば丸ごと監視とかあれこれ自動化できるらしい
- Twitter BootstrapはLESSでできてるので勉強がてらやってみる
npmはNode.jsいれると入ります。
あと、npmのinstallは「-g」オプションを付けるとグローバルに（どこからでも使えるように）インストールされ、「-g」つけないとそれを実行したディレクトリに入るだけなのでコマンド打っても出てこないはずです。