How to reference minified code, but keep developing in JavaScript

Question

Our index.html refers to about 25 javascript files. For deployment, we need to minify all of those, so we have to update our index.html references to the minified versions.

When we go back to development, we have to use a similar index.html file, but make references to non-minified javascript files. Is there a best practice way to accomplish this without having to keep two index.html files in sync, one for development and one for deployment?

Answer 1

The answer is Source Maps, its basically a way to reference a minified javascript file back to an un-built state.

That way you only need one index.html file referencing your minified javascript file, and the source maps will help you debug them as if they were un minified.

Here is a link that really helped me.

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

You could also use tools like gulp or grunt to make minifying and building the source maps easier.