JPEG, PNG, GIFを一括でlossless最適化する

故有って複雑なdirectory構造の下、大量のJPEGとPNGを最適化することになりました。めんどくさいので自動化しませう。
Web designerの方は、いつもやってる事かとおもひます。
基本的に、それぞれの形式に合はせてツールを選んでコマンドを叩いてやればいいのですが、叩くコマンドを覚えてられないので、それも自動化します。gulp-imageminを使ひます。
先ずnode.jsを入れます。Windowsでも簡単です。公式サイトからMSIを落としてきてダブルクリックするだけですが、LinuxやMac (Homebrew) を使ひ慣れてる方ならばChocolatyがおすすめです。
cf. Chocolatey Gallery | Node JS 0.10.32 https://chocolatey.org/packages/nodejs

cmdやターミナルを立ち上げて、node -v でちゃんとversionが出ればOK。node.jsといっしょにnpmも入ってくれます。

npm install -g gulp

でgulp commandを入れませう。
cd で最適化する画像を入れたdirectoryに移動しませう。

npm init
npm install --save gulp gulp-imagemin

で準備を整へます。何が起きてるかは、package.json と云ふfileと node_modules といふdirectoryが作られるのでそれをよく観察しとくといいです。
さて、gulpfile.js といふfileを作って、画像を最適化してくれるやうにしませう。

// gulpfile.js
'use strict';
var gulp     = require('gulp'),
    imagemin = require('gulp-imagemin');

function debug() {
  var es = require('event-stream');

  return es.map(function (file, done) {
    console.log(file.path);
    done();
  });
}

function rescue(stream) {
  return stream.on('error', function (err) {
    console.error(err);
    // stream.emit('end');
  });
}

function imageminE(option) {
  return rescue(imagemin(option));
}

gulp.task('imagemin-gif', function () {
  return gulp.src('+(!node_modules|**)/*.gif').
    pipe(imageminE({ interlaced: false })).
    pipe(gulp.dest('.'));
});

gulp.task('imagemin-jpeg', function () {
  return gulp.src('+(!node_modules|**)/*.+(jpg|jpeg)').
    pipe(imageminE({ progressive: true })).
    pipe(gulp.dest('.'));
});

gulp.task('imagemin-png', function () {
  return gulp.src('+(!node_modules|**)/*.png').
    pipe(imageminE({ optimizationLevel: 7 })).
    pipe(gulp.dest('.'));
});

gulp.task('imagemin', ['imagemin-gif', 'imagemin-jpeg', 'imagemin-png']);
gulp.task('default', ['imagemin ']);

directory構造はこんな感じです。

images/
├ node_modules/
├ package.json
├ gulpfile.js
├ 画像が入ったdirectory達
└ 画像が入ったdirectory達

ここで (npm init したdirectoryから移動しちゃダメですよ)、

gulp --verbose

とcommandを打てば、すごいがんばってくれます！

がんばれ♡　がんばれ♡

JPEGにはjpegtran、PNGにはoptipngを使ふさうですが、他のツールに入れ換へることもできます。gulp-imageminのREADMEを読んでください。
cf. gulp-imagemin https://www.npmjs.org/package/gulp-imagemin