concept sourcemap in category javascript

This is an excerpt from Manning's book Front-End Tooling with Gulp, Bower, and Yeoman. Login to get full access to this book.

Sourcemaps are a way of letting the browser know where to find the original source of a certain file that has been loaded. There are two ways of letting the browser know of the existence of a sourcemap: either adding a reference URL in a comment of the output file or including the encoded sourcemap as a whole.

The contents of the sourcemap are created by splitting the compiled output file into several pieces. Each of those pieces gets a reference in the sourcemap, pointing to the following properties:

Figure 6.9. A sourcemap keeps a record of a code snippet’s position in the original file. To do so, it stores both the original file’s name and the start and end of this snippet.

Also, the original source code is included in the sourcemap, ensuring that it can be loaded from any device, without having the original source available.

Should a browser like Chrome or Firefox see a reference to one of those sourcemaps, it will load the map and display the original contents in the debug window. Sourcemaps are generated during the modification of the files’ contents. Uglify, for instance, keeps track of every transformation it makes and stores relevant information in a sourcemap if needed. Sourcemap-generating functionality is available in many tools and also in the wrapping Gulp plugins, which allows developers to readily use sourcemaps.

To overcome this issue—having a development-like debugging experience in the execution environment—browser vendors Google and Mozilla combined their efforts to create sourcemaps, which are a way of tracking the output back to its original source files. In this section, you’ll see how to generate sourcemaps with Gulp.