これからはじめるGulp #1：bundler, rbenv, nodebrewでGulp環境を作ってみる

はじめに

今までGruntばかり使って来て、そろそろGulpも使っておこうということで、Wordpressテーマを作るついでに勉強したことをメモしていきます。12月ということで、アドベントカレンダーの季節ですが、他の方が主催しているアドベントカレンダーに参加できるほど知識も経験もないので、一人アドベントカレンダーをやることにしました。良いテクニックの紹介というよりは完全に個人的に勉強した内容をアウトプットしているだけなので、すでに使いこなしている方はトップページから他の記事を読んだ方が有意義だと思います。

今回はとりあえずbundler, rbenv, nodebrewが用意されている環境でgulpが実行できるところまで進めます。bundler, rbenv, nodebrewが出る時点でデザイナーの方には敷居が高いけどフロントエンジニアにとってはいたって普通な内容。私がどっちつかずな人間なのでダメなところがあれば優しくまさかりを投げてください。

Gulpって

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

環境構築

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

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

$ mkdir test.io
$ cd test.io
$ rbenv local 2.1.0
$ 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 execの省略はこちら$ bundle exec を省略するの通りです。

$ 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
> [email protected] 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
[email protected] /Users/nukos/.nodebrew/current/lib/node_modules/gulp
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

$ npm install --save-dev gulp
> [email protected] install /Users/nukos/Projects/test.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.
[email protected] node_modules/gulp
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])

インストールチェック

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

$ 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/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[11:34:05] Starting 'default'...
[11:34:05] Finished 'default' after 60 μs

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

この記事はこれからはじめるGulp：bundler, rbenv, nodebrewでGulp環境を作ってみる（1）の転載です。