gulp ことはじめ

gulp.js - the streaming build system

巷で話題の コマンドラインビルドツール gulp を試してみました。

この記事の執筆時点の gulp バージョンは 3.5.2 です。

gulp を使うためには node.js がインストールされていることが前提です。

gulp をインストール

はじめに、グローバルに gulp をインストールします。コマンドラインから以下のコマンドを実行して gulp をインストールします。

npm install -g gulp

プロジェクトで gulp を使えるように設定する

次に、プロジェクト内で gulp を使用するために以下のことを行います。

  • 2つの依存パッケージをインストールする。
  • 使用したい任意のプラグインをインストールする。
  • 実行したいタスクを定義するために gulpfile.js ファイルを作成する。

これから先の手順はプロジェクトディレクトリで行います。

依存関係をインストール

まず、依存関係をコマンドラインからインストールします。

npm install --save-dev gulp gulp-util

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

続いて、使いたい任意のプラグインをコマンドラインからインストールします。

ここでは 2つのプラグインをインストールしてみました。

npm install --save-dev gulp-uglify gulp-concat
  • gulp-uglify JavaScript ファイルを圧縮するプラグイン
  • gulp-concat 複数のファイルを1つのファイルに連結するプラグイン

プラグインについては公式サイトを参照してください。

gulp の依存関係とプロジェクトのために必要なプラグインをインストールするために --save-dev フラグを使用していることに注意してください。このようにすることで、package.json ファイル内の devDependencies リストにパッケージの依存関係が書き込まれます。これで簡単にnpm installコマンドで、後でインストールすることができるようになります。

プロジェクトに package.json ファイルがない場合は、コマンドラインで npm init を入力する(対話形式でいろいろ聞いてくるが Enter キーを連続して押してしまってOK)か、エディターで新しいファイルを開いて、始まりと終わりの {} 中括弧を記述して「package.json」という名前で保存します。そして上記の npm コマンドを再実行します。

package.json ファイルは以下のようになっていると思います。

{
  "devDependencies": {
    "gulp-util": "~2.2.14",
    "gulp": "~3.5.2",
    "gulp-concat": "~2.1.7",
    "gulp-uglify": "~0.2.1"
  }
}

gulpfile.js にタスクとプラグインを定義

Grunt のように gulp は gulpfile.js という同名の設定ファイルを持っています。このファイルに実行する必要があるタスクと必要なプラグインを定義します。gulpfile.js はプロジェクトフォルダのルートに作成する必要があります。

gulpfile.js に記述する構文は非常にシンプルで簡潔です。

プラグインが定義されたタスクを完了するために、必要な gulp を指定します。

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

次にタスクを定義します。

実行するタスクを定義するためには gulp メソッドタスク task() を使用します。

gulp.task('js', function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('./js'));
});

src() メソッドは圧縮したいファイルを検索して、プラグインに処理を渡します。

pipe() メソッドは src メソッドから送られたファイルを取得してプラグインタスク処理を行います。

最後の dest() メソッドは処理されたファイルの書き出し先フォルダを指定します。

js フォルダ内のすべての js ファイルを圧縮して、圧縮された複数のファイルを all.min.js というファイル名で1つのファイルにして js フォルダに書き出します。

最後にタスクを実行するための default task を記述します。

gulp.task('default', function(){
    gulp.run('js');
});

最終的に gulpfile.js は以下ようになります。

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('./js'));
});

gulp.task('default', function(){
    gulp.run('js');
});

gulp を実行する

コマンドラインから以下のコマンドを実行します。

gulp

定義したタスクが実行されて、js フォルダに all.min.js ファイルが書き出されます。

雑感

コマンドラインビルドツールといえば Grunt が定番ですが、 gulp は読みやすく、理解しやすい簡潔な作りなので、私のようなノンプログラマーでも試してみる価値があると思います。定義設定ファイルを記述するのは面倒ですが、個人的には Grunt よりは平易だと思いました。プラグインの数は300と少ないですがこれから充実してくると思われます。

Gulp is awesome.

参考リンク