[Wordpress][bundler][rbenv][nodebrew][Gulp]これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

今までGruntばかり使って来て、そろそろGulpも使っておこうということで、Wordpressテーマを作るついでに勉強したことをメモしていきます。今回はとりあえずgulpが実行できるところまで進めます。

Gulpとは

GulpはGrantと同じタスクランナーの1つです。色々調べた限りタスクの記述方法がシンプルでわかりやすく高速らしい？

環境構築

まずはGemの準備からはじめます。Ruby環境はRuby版のSass（gulp-ruby-sassプラグイン）を使わない場合は不要です。gulp-sassプラグインの場合はnode-sassを利用しているのでnode.js環境だけで動作します。

Homebrew, rbenv, bundlerはこの記事Jekyll × Gruntでブログを作ってみた：環境構築編を参考に用意しています。また、nodebrewを使ったnode.js環境はこちらの記事nodebrewを使ったnode.jsのバージョン管理（Mac）です。

まずは適当にディレクトリを作り、rbenvでrubyのバージョンを指定します。

$ rbenv local 2.1.0

Gemfile

次にbundlerを使ってGemfileを作ります。

$ bundle init
Writing new Gemfile to /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/Gemfile

作られたGemfileに必要なGemを記述（$ vi Gemfile）します。

source "https://rubygems.org"

gem "sass"
gem "bourbon"
gem "neat"
gem "bitters"

Gemのインストール

pathとbinstubsを指定してインストールを実行します。

$ bundle install --path=vendor/bundle --binstubs=vendor/bin
Fetching gem metadata from https://rubygems.org/.............
Resolving dependencies...
Installing sass 3.4.9
Installing thor 0.19.1
Installing bourbon 4.0.2
Installing bitters 0.10.1
Installing neat 1.7.0
Using bundler 1.7.6
Your bundle is complete!
It was installed into ./vendor/bundle

これで、Gemの準備は完了。

node.js環境の構築

次にGulpを実行するためにnode.js環境を作ります。

package.jsonを作る

npmでpackage.jsonを作ります。

$ npm init
name: (test.io)
version: (1.0.0)
description: test.io wordpress theme
entry point: (index.js) gulpfile.js
test command:
git repository:
keywords:
author: nukos.kitchen
license: (ISC)
About to write to /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/package.json:

{
  "name": "test.io",
  "version": "1.0.0",
  "description": "test.io wordpress theme",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "nukos.kitchen",
  "license": "ISC"
}

これでnode.js環境の準備は完了。

Gulpのインストール

最後にGulp環境を作ります。

グローバルにGulpをインストール

$ sudo npm install --global gulp
> v8flags@1.0.5 install /Users/nonakaryuichi/.nodebrew/current/lib/node_modules/gulp/node_modules/v8flags
> node fetch.js

flags for v8 3.14.5.9 cached.
/Users/nukos/.nodebrew/current/bin/gulp -> /Users/nukos/.nodebrew/current/lib/node_modules/gulp/bin/gulp.js
gulp@3.8.10 /Users/nukos/.nodebrew/current/lib/node_modules/gulp
├── pretty-hrtime@0.2.2
├── interpret@0.3.8
├── deprecated@0.0.1
├── archy@1.0.0
├── v8flags@1.0.5
├── minimist@1.1.0
├── semver@4.1.0
├── tildify@1.0.0 (user-home@1.1.0)
├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.2, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.1.3)
├── vinyl-fs@0.3.13 (graceful-fs@3.0.5, defaults@1.0.0, strip-bom@1.0.0, vinyl@0.4.5, mkdirp@0.5.0, through2@0.6.3, glob-watcher@0.0.6, glob-stream@3.1.17)
└── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, vinyl@0.4.5, lodash@2.4.1, through2@0.6.3, dateformat@1.0.11, multipipe@0.1.2, lodash.template@2.4.1)

プロジェクト毎にGulpをインストール

$ npm install --save-dev gulp
> v8flags@1.0.5 install /Users/nukos/Projects/marke.io/vccw/www/wordpress/wp-content/themes/test.io/node_modules/gulp/node_modules/v8flags
> node fetch.js

flags for v8 3.14.5.9 cached.
gulp@3.8.10 node_modules/gulp
├── interpret@0.3.8
├── pretty-hrtime@0.2.2
├── deprecated@0.0.1
├── archy@1.0.0
├── v8flags@1.0.5
├── tildify@1.0.0 (user-home@1.1.0)
├── minimist@1.1.0
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── semver@4.1.0
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── vinyl-fs@0.3.13 (graceful-fs@3.0.5, strip-bom@1.0.0, defaults@1.0.0, vinyl@0.4.5, mkdirp@0.5.0, through2@0.6.3, glob-stream@3.1.17, glob-watcher@0.0.6)
├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, vinyl@0.4.5, lodash.template@2.4.1, dateformat@1.0.11, through2@0.6.3, multipipe@0.1.2, lodash@2.4.1)
└── liftoff@0.13.6 (extend@1.3.0, flagged-respawn@0.3.1, resolve@1.0.0, findup-sync@0.1.3)

インストールチェック

インストールできているかバージョンチェックコマンドを実行してみます。

$ gulp -v
[11:30:26] CLI version 3.8.10

問題なさそうです。

gulpfile.js

今回はGulpの実行までがゴールなので空のタスクを実行できるように、公式に書かれているテンプレをそのままコピペ（$ vi gulpfile.js）します。

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

gulpの実行

Gulpのdefaultタスクを実行します。

$ gulp
[11:34:05] Using gulpfile ~/Projects/marke.io/vccw/www/wordpress/wp-content/themes/marke.io/gulpfile.js
[11:34:05] Starting 'default'...
[11:34:05] Finished 'default' after 60 μs

無事動いているようです。
今回はここまで。明日はSassを動かしてみたいと思います。

シリーズ

最近構築したWordpressサイトで使っている便利なプラグイン30選

2015-02-02
Wordpress, wp-cli

WordpressでMarkdownとSyntaxHighlighter

2015-01-19
Wordpress, markdown

VCCWでファイルがアップロードできなくてはまった話

2015-01-16
Wordpress, VCCW

WP-CLIでWordpressプラグインをインストールし有効化する

2014-12-02
Wordpress, VCCW, wp-cli, bash

これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる

2014-12-02
Wordpress, Gulp

これからはじめる Gulp シリーズこれからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる