git diff for minified JavaScript files

At work we have a small project in which we get CSS and JavaScript from an external agency. Now and then updates come in and have to be integrated into the existing code base. Sometimes things break, and all I have is minified JavaScript.

I wanted to be able to properly see the changes in the minified JavaScript files when using git diff, and it turns out you can configure Git to do that.

At first, install the JavaScript beautifier js-beautify via pip:

$ pip3 install jsbeautifier

Now we define a diff configuration with name minjs, which tells Git to prettify files with js-beautify:

$ git config --global diff.minjs.textconv js-beautify

If you have got enough space on disk, enable caching of the beautified files:

# takes extra space, but makes it faster:
$ git config --global diff.minjs.cachetextconv true

At last create a file called .gitattributes in your project root directory that tells Git to use the minjs diff configuration for file names ending with .min.js:

*.min.js diff=minjs

git diff now diffs minified JavaScript files in a readable way.

git show does not unless you use the --ext-diff option.

Written by Christian Weiske.

Comments? Please send an e-mail.