デザインファイルをGit LFSで管理する方法 + コミット時にSketchのファイルを自動書き出し

git-lfs インストール

$ brew install git-lfs

新しいgitリポジトリ作成

もうある場合はやらないで良い

$ git init

git-lfsで管理したいファイルを追記

$ git lfs track "*.psd"
$ git lfs track "*.ai"
$ git lfs track "*.sketch"
$ git lfs track "*.png"
$ git lfs track "*.jpg"

追記されると.gitattributesが作成されてます

$ cat .gitattributes 
*.psd filter=lfs diff=lfs merge=lfs -text
*.ai filter=lfs diff=lfs merge=lfs -text
*.sketch filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text

コミットしてプッシュ

あとは普通のgitと同じようにコミットしてプッシュするだけ
SourceTreeでも普通にできました。

コミット時にSketchのファイルを自動で画像で書き出してコミットするスクリプト

sketchtoolインストール

$ /Applications/Sketch.app/Contents/Resources/sketchtool/install.sh
$ sketchtool -v
sketchtool Version 42 (36781)

sketchtoolで書き出してみる

sketchtoolの使い方はこちら

$ sketchtool export artboards pc.sketch --output=output/pc

pre-commit.shを作成

管理しやすいようにscripts/の下に置きます。
これでrootにある、sketchファイルが自動で書き出されるようになる。

scripts/pre-commit.sh

for filename in *.sketch; do
  sketchtool export artboards $filename --output=output/${filename%.*}
done

git add ./output/.

githookに設定する

さっき作ったスクリプトをgithookのpre-commitで実行されるように設定します。

$ echo 'sh scripts/pre-commit.sh' > .git/hooks/pre-commit
$ chmod +x .git/hooks/pre-commit

普通にコミット

$ git commit
Exported 01_top.png
Exported 02_news.png
Exported 03_about.png
Exported 04_contact.png
....

$ tree
.
├── README.md
├── pc.sketch
├── output
│   ├── pc
│   │   ├── 01_top.png
│   │   ├── 02_news.png
│   │   ├── 03_about.png
│   │   ├── 04_contact.png

おわり

便利。
git-lfsとgithookだけ設定してあげて、SourceTreeでデザイナーさんでも使えそう！