Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
start-kuroigamen

黒い画面の環境構築メモ

Macのターミナル(通称:黒い画面)でWeb制作の環境を構築する手順メモ。とりあえずCSS Preprocessorとかが使えるようにするところまで。ちなみにOSX 10.8.2です。

注意

書いている本人はこのへん初心者で、これは別にベストな方法ではなく、間違いもあるかもしれません。さらに失敗した手順もメモとして残しています。上から順にやっていくと同じところで同じように失敗します(笑)ので、試すときは一読してからどうぞ。

先に見ておいた主な記事

ちょっとした気付き

  • コマンドは最低cdだけ使えれば何とかなる
  • コマンドのよくある解説で、先頭に $ が付いてるけどそれは入力しなくていい
  • cdの後に半角スペース入れてFinderからフォルダをドロップしたら、そこまでのパスが書ける
  • ターミナルのウィンドウのタイトルバーに現在のディレクトリ名が出てる

手順

Xcode

App Storeから普通にインストール。でかいアプリなので時間がかかる。

2015.09.10_追記:Yosemiteからは、Xcodeを入れなくても、ターミナルからでインストールできる模様。詳しくはYosemiteにコマンドラインツールを入れる - からぶんを参照。

Command Line Tools

XcodeからCommand Line Toolsをインストール。Installing Command Line Tools on OS X Mountain Lion - agwの日記 を参考に。

Homebrew

Homebrew。最下部の「Install Homebrew」のコードをターミナルに貼り付ける。

brew -v

でバージョン確認。0.9.3 だった。

Nodebrew

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。ほっ。

Node.js

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

以下は 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の環境を作ってみる。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

Bower。Webの制作に必要なライブラリとかをコマンド一発で探して落として指定の場所に展開してくれる、なんだか便利なやつらしい。入れてみることにする。

npm install bower -g

入った。バージョンは0.6.8。npmが入ってないよって怒られるかなと思ったが、Node.jsを入れたときに(?)入ってたみたい。適当なディレクトリに移動して

bower install jquery

ってやると、jQueryを入れてくれる。

roots

開発環境として、こもりさんから教えてもらったrootsを入れてみる。

npm install roots -g

問題なく入った。ライブリロードは便利。jadeとstylusに標準で対応しているっぽい。

jade

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

続いてStylus。公式には

npm install stylus

でOKってあるんだけど、jadeと同じく

npm install -g stylus

というようにオプション付けないとダメっぽかった。バージョンは0.31.0。ディレクトリに移動して

stylus --watch

すると同名ファイルが随時コンパイルされる。こっちはjadeと違ってフォルダ単位で監視できる。

styleDocco

スタイルガイドを生成してくれるstyleDoccoを入れてみる。コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する「styleDocco」の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog に書いてある通りに進めて問題なくできた(とりあえずgrunt.jsはまだ)。

これからやりたいこと

  • Gruntってやつを使えば丸ごと監視とかあれこれ自動化できるらしい
  • Twitter BootstrapはLESSでできてるので勉強がてらやってみる

npmはNode.jsいれると入ります。

あと、npmのinstallは「-g」オプションを付けるとグローバルに(どこからでも使えるように)インストールされ、「-g」つけないとそれを実行したディレクトリに入るだけなのでコマンド打っても出てこないはずです。

あと、パスの指定の件、ファイルの適用順とかはこちらが参考になりますかね。
http://d.hatena.ne.jp/rdera/20080806/p1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment