Edited at

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

More than 3 years have passed since last update.

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とかさらっと書けるようになったら

結構業務効率が上がるし、うまくいったとき少し気持ちがいいきがするので

少しずつ覚えたい。