Node.js 製の タスクランナー gulp.js を使ってみる

このエントリーをはてなブックマークに追加

ここ最近のSaCSSでタスクランナーの導入やできることなどをテーマにお話をしていまして、6月7日に開催された vol.55 でも gulp についてを話てきました。

まだまだ Grunt で準備することのほうが多いのですが、今後は様々な場面で gulp.js が出てきそうだったので、ちょこちょこ gulp の使い方やできることなどなどをメモしていこうと思います。

まとめのエントリーはいつの日か書くかもしれないですが、とりあえずは導入や試したこと、使っているプラグインなどなどについてをまとめようと思います。

gulp.js – the streaming build system

gulp.js ？

gulp.js は Node.js 製 のタスクランナーです。コマンドを叩くことで用意しておいたタスクを自動化かしてくれるツールです。例えば、ファイルの保存を監視してSassをコンパイルしたり、ローカルサーバーを動かして LiveReload でブラウザの表示を自動で更新したりなどなど。

The streaming build system （ストリーミング・ビルド・システム）と書かれているのですが、ストリーミング？

調べて見たところ、 Node.js の stream という API を使う、 データの流れを抽象化するためのインターフェイスとのこと。

Node.js - Gruntfile.js が長すぎてつらい人は gulp を使ってみよう - Qiita

Node.js の stream のドキュメントは、特に読まなくていいですがリンクをのせておきます。

Stream Node.js v0.10.29 Manual & Documentation

ざっくり言うと、 現状の grunt との一番大きな違いはここで、 grunt は指定した処理を指定した順のとおりに動かしていくような作りになっているのですが、 gulp は非同期的に 処理を行う作りになっています。それぞれの処理を待って次へ、次へと進むわけでなく、一つの処理中に他の処理も行うことができるということですね。

重い処理などがある場合、その完了を待たずとも他の処理も動かせるのですが、処理の順序指定に慣れないと本当は必要な処理を待たずに動いてしまうことにもつながるので、その点は注意が必要だったりします。

さて、だらだらどういうものかを書くよりもまずは導入してみましょう。

Node.js の準備

Node.js で動くために、Node.jsのインストールが必要です。

一番簡単なのは公式サイトからダウンロードしてきてインストールする方法です。

node.js

インストーラーをダウンロードしてインストールをするだけです。

しかし、Node.js はアップデートが比較的速いペースで出てくるので、最新版を入れなければならないような場合やプロジェクト内でツールのバージョンを統一させるような場合に、インストーラーでは面倒になってきたりします。

そのため、 Node.js ではバージョンの切り替えが比較的容易にできるように、バージョンマネージャーを利用するほうが楽だったりします。ただしコチラはコマンドを多用することになるのでコマンドに不慣れな場合はインストーラーを利用してください。

Node.js のバージョンマネージャーは、 nvm とか nave とかあるらしく、以前は 私も nvm を利用していたのですが、以前開催された Sapporo.js の JS道場 に出た際に 主催の @tricknotes に、 @hokaccha の nodebrew がいいですよ！と教えてもらったのでそれ以来ずっと nodebrew を利用しています。

Github : hokaccha/nodebrew

参照先に書かれている通りに設定をするだけで最新版も入れることができます。

gulp のインストール

gulp は グローバルとプロジェクト個々（ローカル）の２箇所でインストールをしておく必要があります。

まずはグローバルにcli用をインストールしておきます。

$ npm install -g gulp

インストール先の権限つけなければインストールが完了しない場合は sudo を頭につけることを忘れずに。

続いて gulp を使うプロジェクトディレクトリに移動し、インストールします。

他の作業者が、すでにインストールをしていて package.json 用意がある場合は、

$ npm install

これだけで必要ファイルが入ってくると思いますが、 package.json の用意がない場合は初期設定用として準備します。

package.json は、プロジェクトディレクトリで npm init と叩くとプロジェクトの設定をあれこれ確認されますが、ただひたすらEnter（return）で進めるだけでもOKで、 必要な項目の設定がはいります。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp_test)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD-2-Clause)
About to write to /Users/UserName/project/package.json:

{
  "name": "gulp_test",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",q
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}

Is this ok? (yes)

package.json の中身

{
  "name": "gulp_test",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}

package.json の準備ができたら次はプロジェクトでのインストールです。 package.json にも使うパッケージ名を登録するために、 --save-dev のオプションをつけてインストールします。

$ npm install gulp --save-dev

尚、大した注意ではないですが、インストールする package名とプロジェクト名が同じになっていると WARN でインストールができません。gulp の場合は、 package.json の name が gulp としているとエラーになりますので、テスト導入する人はちょっとした注意を。

package.json name を gulp にしていた場合のエラー

npm WARN install Refusing to install gulp as a dependency of itself

インストールが成功すると、プロジェクトの中に node_modules というフォルダができていて、その中にインストールしたパッケージが入ってくるようになります。

gitなどでプロジェクト共有している場合、この node_modules を共有していると結構重かったりしますし、 package.json が共有されていたらあとで $ npm install をしたら必要なものが入ってくるため、 node_modules のディレクトリの共有は不要です。

.gitignore で node_modules を指定しておいて共有しないでおくと共有ファイルを少なくしておくことができます。

gulpfile.js

ここまで準備ができたら、次は必要なタスクを記述していく gulpfile.js の準備です。

gulpfile.js の中身

var gulp = require('gulp');

gulp.task('taskname', function() {
  // ここにタスクを記述
});

最小限の構成はこんな感じです。このように準備しておくと $ gulp taskname で使えるようになります。

taskname の箇所を default としておくと、 $ gulp だけで呼び出しができます。

試しにテキストをターミナルに表示してみたいと思います。

テキストをターミナルに表示

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('(´ ºムº `)');
});

準備ができたら $ gulp と入力をすると下記の表示がでてきます。

$ gulp
[hh:mm:ss] Using gulpfile ~/gulp_test/gulpfile.js
[hh:mm:ss] Starting 'default'...
(´ ºムº `)
[hh:mm:ss] Finished 'default' after 118 μs

こんな表示になります。

また、例えば ham タスクを作成して、 その後にdefaultを実行したいような場合は下記のようにしたりもできます。

var gulp = require('gulp');

gulp.task('ham', function() {
  console.log('h2ham');
});

gulp.task('default', ['ham'], function() {
  console.log('(´ ºムº `)');
});

これで $ gulp といれると

$ gulp
[hh:mm:ss] Using gulpfile ~/gulp_test/gulpfile.js
[hh:mm:ss] Starting 'ham'...
h2ham
[hh:mm:ss] Finished 'ham' after 77 μs
[hh:mm:ss] Starting 'default'...
(´ ºムº `)
[hh:mm:ss] Finished 'default' after 59 μs

下準備はこんなところ。

続きはパッケージを何かしら指定してファイルの監視をしてみたいと思います。

参照：