SouceTreeでgitにコミット前に画像ファイル(jpg,png)を最適化したい


納品ルールが変わった

ある日納品ルールが変わって、「TinyPNGを通した画像ファイルを納品せよ」となった。

前々から画像ファイルの最適化はしないといけないと思っていたので、

この機会にどんな方法があるか考えてみた。


自然な流れでファイルを最適化したい

Gulp等のタスクランナーで画像ファイルを最適化するタスクがあることは知っていた。

ぜひ開発環境に取り入れたいと思っていて試行錯誤してたんだけど、、

結局、ローカルサーバ上で腰を据えてやる静的コーディングの仕事ばかりではないので、うまい流れで普段のワークフローに取り入れられずにいた。。

(不勉強で言うのもなんだけど、客先サーバー上でWP弄りつつ作業するようなスタイルには向いてないんだと思っている)

なので、別の方法を考えてみた。

いちいちWebアプリ通して納品するのはまずは考えないことにした。。


WinSCPでファイルアップロード時にバッチとか動かせないか

普段使っているFTPソフトに一段噛ませるソリューション。

ただ、軽く検索した限りだとGUIではそういうのできなさそう、あきらめる。


SourceTreeでコミット時にバッチ動かせないか

こっちはすぐ見つかった。

ワークフローにおける画像の最適化や、その参考サイトとして挙げられているarnaud-lb/pre-commit.shなどを参考にして、四苦八苦。

やっと動いたのでアツいうちにQiitaにまとめる。


SourceTreeでのpre-commitで実行バッチ

.git/hooks/pre-commit.sampleをpre-commitにリネームして、内容を置き換える。

その後、ソースの上のほうを環境に合わせて書き換える。

pngquantjpegtranを使用するのでDLして、.exeだけ「util一時パス」のとこに置いておく。

gitはOS側にパス通しているなら記述自体いらないです。


pre-commit

#!/bin/sh

export PATH="C:\@work\@@utils:$PATH" #util一時パス追加
export PATH="C:\Users\xxxxx\AppData\Local\Atlassian\SourceTree\git_local\bin:$PATH" #git一時パス追加
command -v pngquant.exe >/dev/null 2>&1 || {
echo "Please install pngquant to reduce images size before commit"
exit 1;
}
command -v jpegtran.exe >/dev/null 2>&1 || {
echo "Please install jpegtran to reduce images size before commit"
exit 1;
}

for file in `git diff --cached --name-status|awk '$1 ~ /[AM]/ && tolower($2) ~ /\.png$/ {print $2}'`;
do
echo "Crushing $file"
pngquant.exe --force --skip-if-larger --quality=65-100 --ext=.png $file | grep "filesize"
git add $file
done

for file in `git diff --cached --name-status|awk '$1 ~ /[AM]/ && tolower($2) ~ /\.jpe?g$/ {print $2}'`
do
echo "Crushing $file"
jpegtran-static.exe -copy none -optimize -outfile $file $file | grep "filesize"
git add $file
done
#exit 1 # test abort


ざっくりの解説。

1. 必要なライブラリが無ければ警告をだして終了

2. 画像ファイルを拾って変換。大丈夫だと思うけど、強制上書きしているので画像はちゃんと見れるかアップロード前にチェックしないと取り返しがつかないことになります。

3. 動作テスト時用に、exit 1すれば本コミットが走らない記述を一応コメントアウトで残してます。


感想

pngは結構ファイルサイズが減る!1/3~1/4くらいになるね! jpegは全然減らないね。。 → -perfectオプションが余計だった模様。。外しました。4/5ぐらいのファイルサイズになる感じ。

ワークフローとしては、コミット後に、納品時にサーバー上の画像ファイルを全上書きアップロードする感じで。

追記

quality=65-85だと、まれに画質が悪化する模様。100まで可にすると再現しなくなったので、100にしておくと安心。

ただしファイルサイズは1/2くらいになる印象。

しっかし、Windows環境でのWeb系技術サンプル挙げてるサイト、まことに少なくなり申した。

Web系はMacの時代なんだなあ…