みそしりんぐ

現在進行形みそしる

Webのための環境構築

環境構築 Web Homebrew Ruby

Sass，Compass，Bower，Gruntを導入しました．
備忘録的に，残しておきたいと思います．

（2014 2/26追記：アップデートも忘れずに）

環境

目次

  1. Homebrew導入
  2. Ruby導入
  3. Sass / Compass導入
  4. Node.js / Bower / Grunt 導入
  5. アップデートも忘れずに

1. Homebrewの導入

Homebrew

パッケージ管理システムの一つ．類似にMacPortsなど．
参考：MacOSX - パッケージ管理システム Homebrew - Qiita

導入

Javaのインストール
$ java -version

インストール済であればバージョンが，されていなければ，インストールの確認ウィンドウがでてきます．

Command Line Tools のインストール

下記URL参照
MavericksでCommand Line Tools for Xcodeをインストールする - Qiita

Homebrew本体をインストール

Homebrew公式サイトより

$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
確認
$ brew -v

2. Rubyの導入

Ruby

まつもとゆきひろ（通称 Matz）により開発されたオブジェクト指向スクリプト言語であり、スクリプト言語が用いられてきた領域でのオブジェクト指向プログラミングを実現する。
wikipedia:Ruby

SassやCompassを使うのは，Rubyが必要です．Macにはデフォルトで入っていますが，後々Rubyも使ってみるかもしれないので，rbenvを用いてちゃんとインストールします．
参考：MacでRubyをインストールする | Yuhiisk

導入

rbenv
$ brew install readline
$ brew install openssl
$ brew install ruby-build
$ brew install rbenv
$ rbenv -v
Ruby本体
$ rbenv install 2.0.0-p353
$ rbenv rehash
$ rbenv global 2.0.0-p353
$ rbenv rehash
確認
$ ruby -v
$ ruby -version
$ ruby -versions

どれかやればわかります．Systemになってなかったら成功です．versionsでは，インストールされてるバージョン一覧が表示されます．アスタリスクがついているのが現在使っているバージョンです．

3. Sass / Compass 導入

Sass

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass: Syntactically Awesome Style Sheets

要するにCSSの拡張メタ言語です．入れ子にできたりとか，変数使えたりとか，関数作れたりとか，CSSに必要な気合が減ります．

Compass

Compassを使えば，ベンダープレフィックスやclearfixなどの，ブラウザの違いを吸収するための面倒な記述から開放されます．便利なMixin集．

導入

$ sudo gem install sass
$ sudo gem install compass
$ sass -v
$ compass -v

4. Node.js / Bower / Grunt導入

Node.js

Node.js とは一体何か？
第1回 Node.jsとは：基礎から学ぶNode.js｜gihyo.jp … 技術評論社
Node.jsについては，ここらへんを読めばなんとなくわかります．

Bower

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
Bower

バージョン管理らくだよ！とか，そんな感じです．使いこなせる気がしません．
Bower入門(基礎編) - from scratch

Grunt

Node.jsを使用した自動化ツールです．色々なことができます．
私は，Bowerでバージョン管理してても，パス通すのが面倒なので，grunt-bower-taskを使うために入れました．grunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使う感じなので，今回はgrunt-cliをインストールするところまで．
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17
Grunt入門 〜このマークアップからの卒業〜 - Qiita

導入

Node.jsをアンインストール

前にいれてたので，それを削除してから，改めてHomebrewで入れようと思いました．
参考：Mac OS X から Node.js をアンインストールする方法 - SONICJAM Developerz Blog

lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*
sudo rm -rf ~/.npm
インストール

参考：Homebrewでnode.jsとnpmをインストール | bulblub

$ brew install node
$ npm install -g bower
$ npm install -g grunt-cli
$ node -v
$ bower -v

5. アップデートも忘れずに

参考：HomebrewやRubyGemsの定期的なアップデート祭りをしませう | WP-D

$ brew update
$ brew upgrade
$ sudo update_rubygems
$ sudo gem update

ついでに古いのをお掃除

$ brew cleanup
$ gem clean