これからはじめるGulp #13：gulp-changedプラグインで変更されたファイルだけを処理させる

はじめに

前回のこれからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化でgulp-imageminプラグインを試しました。今回は前回のimageminタスクに更新されたファイルのみ処理できるようgulp-changedプラグインを使って改良してみます。

gulp-changedプラグインについて

gulp-changedプラグインはsrcとdestをチェックして変更されたファイルだけをStreamに流します。gulp-changedプラグイン以外にもgulp-cached, gulp-remember, gulp-newerなどのプラグインがありそれぞれの特徴に合わせて活用することで無駄な処理を減らし待機時間を減らすことができます。

gulp-changedをインストールする

$ sudo npm install gulp-changed --save-dev
Password:
gulp-changed@1.0.0 node_modules/gulp-changed
└── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)

imageminタスクにgul-changedプラグインを差し込む

gulp-changedプラグインを読み込んでimageminタスクの一番最初のパイプラインに差し込みます。

var gulp     = require('gulp');
var imagemin = require('gulp-imagemin');
var changed  = require('gulp-changed'); //<-

var paths = {
  srcDir : 'assets/images/_src',
  dstDir : 'assets/images/prd'
}

gulp.task( 'imagemin', function(){
  var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
  var dstGlob = paths.dstDir;
  var imageminOptions = {
    optimizationLevel: 7
  };

  gulp.src( srcGlob )
    .pipe(changed( dstGlob )) //<-
    .pipe(imagemin( imageminOptions ))
    .pipe(gulp.dest( dstGlob ));
});

タスクを実行する

imageminタスクを実行してみます。

変更されていない場合

画像に変更がない場合gulp-imagemin: Minified 0 imagesとなりスルーされます。

$ gulp imagemin
[16:15:05] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[16:15:05] Starting 'imagemin'...
[16:15:05] Finished 'imagemin' after 7.3 ms
[16:15:05] gulp-imagemin: Minified 0 images (saved 0 B - 0%)


<h3>変更された場合</h3>

<p>複数存在するファイルの1つに変更を加えて、再実行すると<span class="tt">gulp-imagemin: Minified 1 image</span>対象のファイルだけ処理されます。</p>


$ gulp imagemin
[16:15:34] Using gulpfile ~/Projects/marke.io/vccw/www/wordpress/wp-content/themes/marke.io/gulpfile.js
[16:15:34] Starting 'imagemin'...
[16:15:34] Finished 'imagemin' after 8.12 ms
[16:15:35] gulp-imagemin: Minified 1 image (saved 1.13 kB - 62.4%)

大量のファイルを処理しなければならない場合にgulp-changedプラグインの便利さが際立ちますね。ちなみにgulp-changedはSassタスクなどのようにリネームされるものには使えません。Sassを効率的に処理させるにはgulp-cachedを使います。明日はそのgulp-cachedプラグインを使ってSassを効率的に処理させるよう改良してみたいと思います。