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

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめる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%)

変更された場合

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

$ 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を試してみたいと思います。

シリーズ

1. これからはじめるGulp（0）：アドベントカレンダースケジュール
2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す