便利なGruntの弱点を補うgulp.jsのインストールと使い方：gulp.jsで始めるWeb開発爆速自動化入門（1/3 ページ）

タスク自動化のためのビルドツールgulpの概要と、Gruntとの違い、セットアップ方法や基本的な使い方、よく使用する主なAPI5つなどを紹介します。

» 2014年08月19日 18時00分公開

[中村修太，クラスメソッド]

便利なGruntだが、弱点もあり……

　以前、JavaScriptを使用したビルドツールである、「Grunt」について紹介する下記の連載を執筆しました。

Gruntで始めるWeb開発爆速自動化入門
JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）やエディター、IDE、実行環境などを紹介していく連載

「Gruntで始めるWeb開発爆速自動化入門」バックナンバー

今回の主な内容

　詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。

　このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。

　シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。

　そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。

　gulpはGruntを継承しつつ、Gruntの悪いところを改善するために開発されたといわれているビルドツールです。本記事では、このgulpについて、Gruntと比較しつつ基本的な使用方法について紹介していきます。

タスク自動化のためのビルドツールgulp.jsとは

gulpの概要

　基本的にはGruntと同じく、Node.js上で動作するタスク自動化のためのビルドツールです。ソースファイルのminify（圧縮）やLESSなどメタ言語のコンパイルなどを実行できます。

　設定ファイルは、とてもシンプルに記述でき、可読性も高くなっています。そして、Node.jsのStream API（データの流れを抽象化するインターフェース）を使って並列実行されるため（同期実行も可能です）、素早く動作します。

　拡張性にも優れており、Gruntと同じように独自プラグインを定義することも可能です。

gulp.js - the streaming build system

gulpの仕組みと特徴

　gulpでは「gulpfile.js」という名前の設定ファイルにJavaScriptでタスクを記述して実行します。

　例えば、下記のようなgulpfile.jsを見てみましょう。任意のファイル群コピーを実行するタスク（copy）が定義されており、src/jsディレクトリ以下のファイルとsrc/html以下のファイルがそれぞれdestディレクトリにコピーされます。

'use strict'
var gulp = require('gulp');
//コピーを実行するタスク
gulp.task('copy', function() {
  //src/jsディレクトリ以下のファイルをコピー
  gulp.src('src/js/**')
   .pipe(gulp.dest('dest/js'));
  
  //src/htmlディレクトリ以下のファイルをコピー
  gulp.src('src/html/**')
    .pipe(gulp.dest('dest/html'));
});
//デフォルトタスク定義
gulp.task('default', function() {
    gulp.run('copy');
});

gulpfile.js

　gulpでタスクを定義するにはtask関数を使い、そのコールバック内でパラメーターを指定していきます。gulp.srcで入力を指定、gulp.destで出力を指定しています。また、処理はpipe関数でチェーンさせることが可能で、どんな処理が行われるか理解しやすいと思います。

　さらに、タスク内には順番に実行したい処理を記述できます。上記例ではsrc/jsディレクトリのコピーとsrc/htmlディレクトリのコピーを順番に定義しています。

　このように、複数の処理を定義した場合でも何を実行したいのか分かりやすいですね。

　ちなみに、defaultタスクを定義しておけば、タスク名を指定しなかったときにデフォルトで実行されるタスクを定義できます。上記の場合は、デフォルトでcopyタスクが実行されます。

　次のようにgulpを実行するとcopyタスクが実行され、srcディレクトリ内にあるファイルがdestディレクトリにコピーされます（※セットアップ方法や実行方法は後述します）。

% gulp copy //defaultタスクが定義されているのでgulpのみでも実行可能
[21:38:26] Using gulpfile path/your/gulpfile.js
[21:38:26] Starting 'copy'...
[21:38:26] Finished 'copy' after 5.99 ms

gulpとGruntの比較、3本勝負！

　　　　　　 1|2|3 次のページへ

SpecialPR