Macにgulpでビルド環境を構築する


#####参考サイト
- [打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ](http://openweb.co.jp/2013/12/26/打倒grunt！node-js用の新たなビルドシステムgulpことはじめ/)
- [公式サイト](https://github.com/gulpjs/gulp)



今までGruntを使っていたのですが、なんか"gulp"いいじゃね？ということで、
gulpを使って、Macで環境構築してみたいと思います。
Gruntと同じビルドツールなので、ソースファイルの圧縮やCSSのコンパイルなどを実行でき、
autoreloadや簡易サーバーも簡単に設置できるようです。

また、Node.jsのstremAPIを使って並列処理をするため、実行速度が早いみたいですね。

ではさっそく。

##インストール
インストールは、npmで行います。
いやちょっとまて。以前やった、nodeのインストールや、bowerのインストールなんか
わすれちゃってる。。。メモしなかった自分が憎い。
ということで、

Macにnode,bowerなどの設定どうやったんだっけ。。。

##環境の確認。
nodebrewで入れたのか、homebrewで入れたのかすら忘れた。
で、nodebrewコマンドをターミナルで打ったら、そんなコマンドなかった。
たぶん、homebrewで入れたはず。

```nodeのバージョン確認
$ node -v
v0.10.28
```

```インストール済みのnodeを確認
$ brew info node
node: stable 0.10.28, devel 0.11.13, HEAD
http://nodejs.org/
```

やっぱりbrewで入れていました。
brew自体のバージョンもついでにアップしておく。

```
$ brew update
```

で、nodeのバージョン一覧を表示しようとおもい、
`$ brew versions node`って叩いたら、versionsコマンドが
なくなってる。。。
めんどー。
この際、nodeはnodebrewに移行します。。。とほほ。


##nodeの再インストール

```brewで入れたnodeのアンインスール
$ brew uninstall node
Uninstalling /usr/local/Cellar/node/0.10.28... 
```

```brewでnodebrewをインストール
$ brew install nodebrew
==> Downloading https://github.com/hokaccha/nodebrew/archive/v0.7.4.tar.gz
######################################################################## 100.0%
==> /usr/local/Cellar/nodebrew/0.7.4/bin/nodebrew setup_dirs
==> Caveats
Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completion has been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
?  /usr/local/Cellar/nodebrew/0.7.4: 7 files, 44K, built in 2 seconds
```

```nodebrewでnode　v0.10.32をインストール
$ nodebrew ls-remote
v0.10.0   v0.10.1   v0.10.2   v0.10.3   v0.10.4   v0.10.5   v0.10.6   v0.10.7
v0.10.8   v0.10.9   v0.10.10  v0.10.11  v0.10.12  v0.10.13  v0.10.14  v0.10.15
v0.10.16  v0.10.17  v0.10.18  v0.10.19  v0.10.20  v0.10.21  v0.10.22  v0.10.23
v0.10.24  v0.10.25  v0.10.26  v0.10.27  v0.10.28  v0.10.29  v0.10.30  v0.10.31
v0.10.32

v0.11.0   v0.11.1   v0.11.2   v0.11.3   v0.11.4   v0.11.5   v0.11.6   v0.11.7
v0.11.8   v0.11.9   v0.11.10  v0.11.11  v0.11.12  v0.11.13  v0.11.14

$

# インストール
$ nodebrew install-binary v0.10.23

fetch: http://nodejs.org/dist/v0.10.23/node-v0.10.23-darwin-x64.tar.gz
######################################################################## 100.0%
Install successful

# インストール済みリストの確認(currentのnodeですね。)
$nodebrew list
v0.10.23

current: none

# 使用したいバージョンを指定
$nodebrew use v0.10.23
use v0.10.23

#　nodeコマンドでバージョン確認。
$ node -v
v0.10.23
```

# nmpのpackage.jsonを作成
package.json自体は簡単に作成できる。

`npm init`

で色々とプロジェクト情報を聞いてくるので、
入力するだけOK。
ほんとは、bowerとか色々なツールも入れたいけど、
今回はgulpのみ。

##やっとgulpまできた
gulpのインストール

```
npm install –save-dev gulp
```

で開発環境としてgulpをインストール。
ちなみに、 -g にするとグローバルでイントールされる。


インストール後に、package.jsonを見るとこんな感じになっている。

```javascript
  1 {
  2   "name": "test",
  3   "version": "0.0.0",
  4   "description": "",
  5   "main": "index.js",
  6   "dependencies": {
  7     "gulp": "~3.8.10"
  8   },
  9   "devDependencies": {
 10     "gulp": "~3.8.10"
 11   },
 12   "scripts": {
 13     "test": "echo \"Error: no test specified\" && exit 1"
 14   },
 15   "author": "",
 16   "license": "BSD-2-Clause"
 17 }

```

今後は、`npm install` すれば、package.jsonに書かれたプラグインはすべて
勝手にinstallされるので、楽チン。

さて、次回はgulp.js(設定ファイル)かこーかなー。