While working on Blitz, a static site generator I'm developing, I wanted to prevent compiled JavaScript from cluttering the diffs. I was using TypeScript which was compiled into JS, so I was really only interested in the changes to TS source code.

Solution

To avoid wasting your time, let's jump into it straight away. You have to make sure that a source map is appended to any JS (or CSS) files you want to hide from your diffs. As an example, look at the source maps appended to JS files in Blitz:

        // ...
        projectPreviewer.startServer();
    };
    return Blitz;
}());
exports.Blitz = Blitz;

//# sourceMappingURL=data:application/json;charset=utf8;base64,[...]

Pay attention to the inline source map that can be seen in the very end. It is likely that tool you're using to get the compiled JS/CSS has a feature that can generate such source maps, so do a quick Google search if you need it.

As you'll find out below, minifying the file should also work but I have not personally tried it. Also, remember that this does not actually remove the generated files from diff, it simply prevents the changes to source code from being displayed, like so:

If you want to remove the files from the diff completely, you'd probably want to use .gitignore.

How it works

GitHub is using a tool called Linguist to do all of the magic related to recognising binary files, determining the language something's written in and so on.

By adding a source map to the end of your JS/CSS files, you're forcing Linguist to recognise them as generated files. According to the code responsible for this particular feature, Linguist can also recognise minified CSS and JS files, but I haven't personally tested this.