はじめに

Gulpは、Javascriptの圧縮やSassのコンパイル等を自動化するための、タスクランナーツールです。各種OS上で動作をし、主にWebアプリケーションのクライアントサイドのファイルの処理に利用されています。同様なツールとして先発のGruntがありますが、Gulpの方が設定ファイルが書きやすいと言われており、より人気を集めています。

Gulpのインストール

Node.jsの導入

GulpはNode.js上で動作するため、Node.jsとそのパッケージマネージャーであるnpmを事前にインストール必要があります。インストールの方法は多くのサイトで説明されていますので、ここでは割愛します。Windowsへのインストールに関しては、こちらを参照ください。

npmを利用したインストール

GulpはNode.jsのパッケージとして提供されているため、npmコマンドを利用して簡単にインストールすることができます。npmでは、インストールしたパッケージをマシン全体で利用できるグローバルインストールと、特定のフォルダ内でのみで利用できるローカルインストールの両方をサポートしています。ただし、Gulpを利用するには、その両方にインストールをする必要があります。

グローバルインストール

Gulpをグローバルインストールするには、-gオプションをつけてnpm installコマンドを実行します。

$ npm install -g gulp

ローカルインストール

まず、プロジェクトフォルダに移動して、npm initコマンドを実施することで、そのプロジェクトをnpmによるパッケージ管理の対象とさせます。プロンプト上で、いくつか設定情報の入力を求められますが、後から変更も可能ですので、不明であればすべてEnterで大丈夫です。

$ cd /path/to/project
$ npm init

コマンド実行後、フォルダ内にpackage.jsonというnpmの設定ファイルが作成されていることが確認できると思います。次に、npm installコマンドを実行し、Gulpをインストールします。この際、–save-devオプションをつけることで、開発用パッケージとしてインストールすることができます。

$ npm install gulp --save-dev

先ほどのpackage.jsonにdevDependenciesとしてgulpが追加されます。

{
...
  "devDependencies": {
    "gulp": "^3.9.0"
  }
}

設定ファイルの作成

タスクの追加

gulpfile.jsという名前のファイルを作成し、その中に実行させたいタスクを記述していきます。例えば、Hello, World!と表示させるタスクhelloを定義するには、以下の様に記述します。先頭のrequire文は常に必要となります。

var gulp = require('gulp');

gulp.task('hello', function() {
    console.log('Hello, World!');
});

これを実行するには、gulp helloコマンドを実行します。

$ gulp hello

複数のタスクをまとめる

一度に複数のタスクを実行したい場合があると思います。その場合は、複数タスクを実行するためのタスクを定義し、taskメソッドの第二引数に対象のタスクを配列で指定します。gulp helloコマンドを実行すると、指定した順にタスクが実行されます。

var gulp = require('gulp');

gulp.task('hello1', function() {
    console.log('Hello, Tokyo!');
});

gulp.task('hello2', function() {
    console.log('Hello, Japan!');
});

gulp.task('hello3', function() {
    console.log('Hello, World!');
});

gulp.task('hello', ['hello1', 'hello2', 'hello3']);

デフォルトタスクを指定する

taskメソッドの第一引数に’default’と指定したタスクを作成すると、そのタスクはgulpコマンドを引数なしで実行した場合に呼び出すことができます。

var gulp = require('gulp');

gulp.task('hello', function() {
    console.log('Hello, World!');
});

gulp.task('default', ['hello']);

プラグインの利用

Gulpで利用できる多くのプラグインが公開されています。ここでは、Javascriptのコードを圧縮するためのgulp-jsminというプラグインを例にとって説明したいと思います。

プラグインのインストール

プラグインのインストールには、gulp本体のインストールにも利用したnpmコマンドを利用します。

$ npm install gulp-jsmin --save-dev

プラグインの読み込み

gulpfile.js内でプラグインを読み込むにはrequire関数を利用します。

var gulp = require('gulp');
var jsmin = require('gulp-jsmin');

タスクの定義

以下は、src/javascripts内にあるJavascriptファイルを圧縮し、public/javascriptsに配置するためのタスクの例です。

var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');

gulp.task('js', function() {
    gulp.src('src/javascripts/*.js')
        .pipe(jsmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/javascripts'));
});

srcメソッドで対象となるファイルを指定し、pipeを連ねることで、その対象に対して順次処理を実行します。ここでは、gulp-renameプラグインも利用することで、圧縮後のファイル名にminという文字列を入れ込んでいます。一般に、この例のように、

1. srcで対象のファイルを指定
2. pipeでそのファイルに対して複数の処理を実行
3. destで処理後のファイルを出力

といった流れで、タスクを定義する場合が多いと思います。

タスクの自動実行

実際の開発において、編集のたびにgulpコマンドを実行するのは不便です。そのため、Gulpにはファイルを監視し、そのファイルに変更があった場合に自動的にタスクを実行するwatchという枠組みが備えられています。以下は、src/javascriptsフォルダ以下を監視し、ファイルに変更があった場合に上記のjsタスクを自動的に実行するための設定となります。

var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');

gulp.task('js', function() {
    gulp.src('src/javascripts/*.js')
        .pipe(jsmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('public/javascripts'));
});

gulp.task('watch', function() {
    gulp.watch('src/javascripts/*', ['js']);
});

この例の場合、実際に監視を開始させるためにはgulp watchコマンドを実行します。

$ gulp watch