【Polymer Starter Kit】画像ファイルの圧縮を自動化する

環境構築

できるだけサイト表示のパフォーマンスを向上させるため、画像ファイルの圧縮し、これを自動化する環境を整えます。まず「BrowsersyncでWEBサーバー環境を整える」を読んでおいてください。その後ここからリポジトリを自身の環境へクローンしてください。

クローンを作成したら次のフォルダへ移動します:

cd /【任意のフォルダ】/polymer-starter-kits/projects/image-task

gulpfile.jsの内容

プロジェクトルートの直下にあるgulpfile.jsで、画像圧縮に関わる部分を抜粋して説明します。

プラグイン読み込み

今回のタスクに関わるgulpプラグイン読み込み部分の抜粋です:

var path = require('path');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');

imagesタスク

imagesタスクでは、画像ファイルを圧縮する関数imageOptimizeTask()を呼び出しています。

/**
 * 画像ファイルを圧縮します。
 */
gulp.task('images', function () {
  return imageOptimizeTask('images', ['**/{*.jpg,*.png}']);
});

imageOptimizeTask()関数の、引数'images'は対象のフォルダを、['**/{*.jpg,*.png}']はフォルダ配下全てのjpg, pngファイルに対して圧縮を行うよう指定しています。

imageOptimizeTask()関数

imageOptimizeTask()関数は、上記のimagesタスクで呼び出されている関数になります:

/**
 * 画像ファイルを圧縮します。
 * @param imagePath トップフォルダを指定(パスの先頭・末尾に「/」は指定しないこと)
 * @param srcs トップフォルダ配下のファイルを指定(ファイル名、グロブを配列で指定)
 */
var imageOptimizeTask = function (imagePath, srcs) {
  return gulp.src(srcs.map(function (src) {
    return path.join(imagePath, src);
  }))
    // 画像ファイル圧縮の設定
    .pipe(cache(imagemin({
      progressive: true,
      interlaced: true
    })))
    // コンパイルされたファイルを指定フォルダへ出力
    .pipe(gulp.dest('.tmp'));
};

「画像ファイル圧縮の設定」のcache(...)は、引数で指定したタスクのキャッシュを行います。ここでは一度圧縮されたファイルはキャッシュされ、次回から圧縮処理は行われずキャッシュの内容が出力されるようになります。注意点として、キャッシュした後、もとのファイルを別の場所へ移動し、再度タスクを実行すると以前のフォルダにファイルが出力されてしまいます。このような場合は次に示すキャッシュクリアを行ってください。

clean:cacheタスク

キャッシュをクリーンするタスクです:

/**
 * キャッシュをクリーンします。
 */
gulp.task('clean:cache', function (cb) {
  return cache.clearAll(cb);
});

動作確認

Starter Kitを起動する

プロジェクトルートに移動して、次の2つのコマンドを実行して必要なライブラリをローカルインストールします:

npm install

bower update

次のコマンドでStarter Kitを起動します:

gulp serve

Starter Kitが起動すると、プロジェクトルートの直下に「.tmp」フォルダが作成され、この配下に圧縮された画像ファイルが出力されているはずです。もとの画像とサイズを比べてみましょう!

【Polymer 1.0】目次へ

Master PG

プログラムし続ける...