参考サイト

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

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

ではさっそく。

インストール

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

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

環境の確認。

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

$ node -v
v0.10.28

$ 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 uninstall node
Uninstalling /usr/local/Cellar/node/0.10.28...

$ 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を見るとこんな感じになっている。

  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(設定ファイル)かこーかなー。

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