How to reference shortened code, but continue to evolve in JavaScript

Question

Our index.html belongs to 25 javascript files. For deployment, we need to minimize them, so we need to update our index.html links on the mini version.

When we get back to development, we should use a similar index.html file, but refer to non-minified javascript files. Is there a best practice way for this without having to synchronize two index.html files, one for development and one for deployment?

Answer 1

Answer: Source Maps is basically a way of referencing a miniature javascript file back to its unset state.

This way you only need one index.html file referencing your miniature javascript file, and the source maps will help you debug them as if they were not reduced.

Here is the link that really helped me.

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

You can also use tools like gulp or grunt to simplify and simplify the creation of source maps.