gulp の watch 制御

Question

gulp で imagemin を使用して画像を圧縮しているのですが、
ひとつ画像が増える（もしくはアップデートする）と
対象フォルダの全画像に対して圧縮をかけてしまうので、
画像が増えると時間がかかりすぎてしまいます。
ですので、吐き出すフォルダ内のファイルのタイムスタンプをチェックし、
古い場合のみ圧縮をする事は可能でしょうか。
もしくは、圧縮し終わったら元ファイルを削除する、でも構いません
（これでも重複作業は避けられます）。

現在は以下のようにしています。よろしくお願いします。

var gulp = require('gulp');
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');

gulp.task('imagemin', () => {
	return gulp.src(['src/**/*.jpg', 'src/**/*.png'])
		.pipe(imagemin())
		.pipe(gulp.dest('www'));
});

gulp.task('watch', () => {
	watch(['src/**/*.jpg', 'src/**/*.png'], () => {
		return gulp.start(['imagemin']);
	});
});

Answer 1

以下な感じでどうでしょうか？

var IN_DIR = 'src';
var OUT_DIR = 'www';

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

gulp.task('watch', () => {
    watch([`${IN_DIR}/**/*.jpg`, `${IN_DIR}/**/*.png`], (e) => {
      // console.log('処理開始');
      var PATH = path.parse(e.path);
      var distDir = __dirname + PATH.dir.replace(__dirname, '').replace(IN_DIR, OUT_DIR);

      return gulp.src(e.path)
        .pipe(imagemin())
        .pipe(gulp.dest(distDir));
    });
});

Comments

[garamond]

すみません、これは何をしてるのでしょう…特に処理として変わらない気がしますが。

[退会済みユーザー]

コメントを見落としていました。
watchのコールバックには更新されたファイルの情報が返ってくるので（上記の場合変数e）、
それをこから更新されたファイルのみをimageminに渡して、wwwディレクトリ下に書き出すようにしたものとなります。

[garamond]

…なんだか理解できませんが（笑）、やってみたらうまく動作しました。あとでトレースしてみます。ありがとうございました。