gulpビルドしたあとに差分ファイルを書き出すMakefileとシェル

webサイトをつくる開発環境をMiddlemanをよく使ってたんですがv4になって
色々変更があり、Middlemanのいいところが少なくなってきた気がしたので
結局gulpに戻ってきた。

Middleman、ビルドした時にターミナルに変更ファイルとか出て
なんとなく気に入ってたのでgulpもビルドした時にそういうの出したいな〜〜〜
なんなら差分ファイルまで抽出してくれたらもっと嬉しいな〜〜〜〜
と思ったのでやってみた。

できたやつ

gulpビルドしたあとにターミナルで無理矢理いろいろしてる。
ほとんど初めてシェル的なやつを調べながら書いたので
確実にもっといい方法があるはず。誰かおしえて下さい。

# ./tmp以下にバックアップ
cp -r ./build ./.tmp
# ./ビルドと前回のdiffをけす
rm -rf build/ diff/ diff.txt
# gulpビルド
gulp build #各々ご自由に(ビルドファイルは build/に出すこと)
# tmp/ と buildのdiffを出す
diff -qr ./build/ ./.tmp/ > diff.txt; [ $$? -eq 1 ] || exit 0
# diff.txtを整理
sed -i '' -e 's/Only in .\/build/+add    .\/build/' ./diff.txt
sed -i '' -e 's/Only in .\/.tmp/-remove .\/build/' ./diff.txt
sed -i '' -e 's/Files/Update /' ./diff.txt
sed -i '' -e 's/: /\//' ./diff.txt
sed -i '' -e 's/and.*//' ./diff.txt
# .tmpは削除、
rm -rf .tmp/
# 一時的にフォルダつくって差分ファイルを出す
mkdir -p diff_files/build || exit 0
# diff吐き出しますよーなシェル
sh diff.sh
rsync -ar diff_files/build/ diff/ || exit 0
# 一時フォルダは消す
rm -rf diff_files/ .tmp/
#################################
####### build complete!!! #######
#################################

diff.sh

cat ./diff.txt | while read line
do
  IFS=' '
  set -- $line
  if [ `echo "$1" | grep "+add"` ] ; then
    echo "\033[0;31m$line\033[0;39m"
    rsync -R "$2" diff_files/
  fi

  if [ `echo "$1" | grep "\-remove"` ] ; then
    echo "\033[0;35m$line\033[0;39m"
  fi

  if [ `echo "$1" | grep "Update"` ] ; then
    echo "\033[0;34m$line\033[0;39m"
    rsync -R "$2" diff_files/
  fi
done

かいせつ

cp -r ./build ./.tmp
前回ビルドしたやつがbuild以下に残ってるはずなので比較するために
一旦tmpへ移動

---

rm -rf build/ diff/ diff.txt
前のdiffファイルとかbuildとかは消す

---

gulp build #以下、ご自由に(ビルドファイルは build/に出すこと)
各々ご自由にgulpビルドする(別にgulpじゃなくてもいい)

---

diff -qr ./build/ ./.tmp/ > diff.txt; [ $$? -eq 1 ] || exit 0
diffコマンドで tmp と build のdiffをとって結果をdiff.txtに出力

---

sed -i '' -e 's/Only in .\/build/+add    .\/build/' ./diff.txt
sed -i '' -e 's/Only in .\/.tmp/-remove .\/build/' ./diff.txt
sed -i '' -e 's/Files/Update /' ./diff.txt
sed -i '' -e 's/: /\//' ./diff.txt
sed -i '' -e 's/and.*//' ./diff.txt

diff.txtの中身は生のままだとこの後の処理がしづらかったので無理矢理
テキストの中身をいじる。上から、

• "Only ~ ./build"は追加されたファイルなので "+add~"に置換
• "Only ~ ./tmp"は削除されたファイルなので "-remove~"に置換
• "Files~"は更新ファイルなので "Update"に置換
• 邪魔な": "の文字は"/"に
• 変更ファイルのand以降の文字列いらないので削除

最終的にはこんなファイルにする

diff.txt

+add    ./build/img/_bg.png
-remove ./build/img/bg.png
Update  ./build/sp/css/page.css 

---

mkdir -p diff_files/build || exit 0
次にする処理の準備。これがあると差分がなかった時にrsyncでエラーでない

---

sh diff.sh
ここまでやったらターミナルにも表示したいよねっていうシェル
やってることは各行の文頭の文字列を判別して
色分けしてechoする。
色分け重要。みやすい。
ついでに、diff_files以下に差分ファイルをコピーする。

---

rsync -ar diff_files/build/ diff/ || exit 0
build以下のファイルを対象にrsyncすると一番上のディレクトリにbuildがついて
diff_files/build/img/bg.png
みたいな階層構造になる。理想は
diff_files/img/bg.png

1回でこうしたかったんだけど無理そうだったので
diff_files/build　以下を diff/ 以下にrsyncしなおす。

---

rm -rf diff_files/ .tmp/
diff_filesと.tmpは一時ファイルなので消す。

おわりに

80%くらい自己満足のためにがんばった。

こうすれば一発でできるじゃん！みたいなの教えて下さい。
こういうシェルとかmakefileとかさらっと書けるようになったら
結構業務効率が上がるし、うまくいったとき少し気持ちがいいきがするので
少しずつ覚えたい。