Gulpにおけるタスク処理の基本

さてここからは、画像を圧縮する(ファイルサイズを減らす)というタスクを通して、Gulpのタスク処理の基本を解説します。最初にプロジェクトフォルダー以下にimagesフォルダーを作成します。このフォルダーに保存した画像を、圧縮して別フォルダーに保存するというタスクを作成してみましょう。

タスクの作成

画像を圧縮する為のプラグインをインストールします。今回はgulp-imageminを用います。

npm install --save-dev gulp-imagemin

※ macOSでインストール中にエラーが出る場合は、sudo npm install --save-dev gulp-imageminと指定して管理者権限で実行します。

タスクを作成するには、プロジェクトファイル直下にgulpfile.jsというファイルを作成する必要がありますgulpfile.jsファイルでの処理は、JavaScriptを使って記述します。

画像の圧縮処理は、作成したgulpfile.jsファイルに下記のコードを記述します。

// gulpプラグインの読みこみ
var gulp = require("gulp");
// 画像を圧縮するプラグインの読み込み
var imagemin = require("gulp-imagemin");
// 「imageMinTask」という名前のタスクを登録
gulp.task("imageMinTask", function() {
  // imagesフォルダー以下のpng画像を取得
  gulp.src("images/*.png")    
    .pipe(imagemin()) // 画像の圧縮処理を実行
    .pipe(gulp.dest("minified_images/")); // minified_imagesフォルダー以下に保存
});

この記述の中で使われているGulpのAPIの処理を解説します。

  • gulp.task("タスク名", 実行される処理)
    タスクを作成します。タスク名と、実際に行われる処理を記述します。
  • require("プラグイン名")
    使用するプラグインを読み込みます。
  • gulp.src("取得するファイル")
    タスクの対象となるファイルを取得します。ファイルは複数ファイルの指定も可能です。
  • pipe()
    一つ一つの処理をつなげます。例えば前述のコードでは、src()で取得した画像を圧縮し、それをgulp.dest()で書き出しています。pipe()メソッドはいくらでもつなげることができるので、連続した複数の処理を実装できます。
  • gulp.dest("保存先フォルダー")
    処理を行ったファイルを指定の場所に保存します。

タスクの実行

作成したタスクを実行するには、コマンドラインでgulp タスク名を実行します。作成したgimageMinTaskというタスクを、下記のコマンドによって実行します。

gulp imageMinTask

タスクを実行すると、minified_imagesフォルダーにファイルサイズが圧縮された画像が書き出されます。ちなみにタスク名をdefaultとすると、gulpコマンドを実行するだけで、設定したタスクが実行されます。以上で、Gulpを使った簡単なタスクの作成と実行ができました。

最後のページではタスクランナーを使うならば是非覚えておきたいwatch機能を紹介します。