Learned another neat git trick while working on getting this blog working (again). This one involves keeping minified assets out of your diffs.

Normally the solution for ignoring minified assets would be to just add the file(s) to the .gitignore file for the project and be done with it. Adding a file to the .gitignore file causes it to be, well, ignored by git. So next time you compile your css down to app.min.css and do $ git add -A the file won’t show up on the list of files that were updated.

This is all well and good in a situation where these minified assets are expected to be generated on a per developer basis or generated by a build script in a production server somewhere. But what happens if you’re running something like a Jekyll blog where your setup is too dumb to know it has to build the minified assets, and instead expects them to be in the repo? Well this is exactly the problem I had.

So we need these minified assets in the repo so they get served. Ok let’s just leave them and see what happens. Well, we find out what ends up happening when we don’t ignore minified assets the next time we run git diff and our console starts looking like the blood orgy scene from Event Horizon:

se,.mfp-iframe-holder .mfp-close{right:-6px;width:100%;padding-right:6px;color:white;text-align:right}.mfp-counter{position:absolute;top:0;right:0;font-siz
e:12px;line-height:18px;color:#ccc}.mfp-arrow{position:absolute;top:0;top:50%;width:90px;height:110px;padding:0;margin:0;margin-top:-55px;overflow:hidden;t
ext-indent:100%;white-space:nowrap;background-color:#111;opacity:.65;-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-ms
-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfp
-arrow:active{margin-top:-54px}.mfp-arrow:hover,.mfp-arrow:focus{opacity:1}.mfp-arrow:before,.mfp-arrow:after,.mfp-arrow .mfp-b,.mfp-arrow .mfp-a{position:
absolute;top:0;left:0;display:block;width:0;height:0;margin-top:35px;margin-left:35px;border:solid transparent;content:''}.mfp-arrow:after,.mfp-arrow .mfp-
a{top:8px;border-top-width:12px;border-bottom-width:12px;opacity:.8}.mfp-arrow:before,.mfp-arrow .mfp-b{border-top-width:20px;border-bottom-width:20px}.mfp

You’ll have to sift through that to see your changes every time you make a change to css that gets compiled.

So we don’t want this file filling up our console every time we git diff and we can’t .gitignore it either. The solution I found involves the .gitattributes file and telling git to treat our minified assets as a binary. This means that every time we make a change to our css, git won’t fill up our console but will instead just say something like “this file differs”.

Let’s say the file causing us agony is assets/css/main.min.css. You’d just make a .gitattributes file with this line:

assets/css/main.min.css binary

Then that garbage up above in our git diff output becomes this:

Binary files a/assets/css/main.min.css and b/assets/css/main.min.css differ