Source maps

Minifying your JavaScript source code into distributable files can be a rough experience when it comes to debugging in the browser. Anytime you hit a snag and check your console for errors, you have to deal with compiled and unreadable code.

Modern browsers have some features that will make their best attempt to make the compiled code readable. However, this is usually still too unreadable to be practical and beneficial.

The solution to this problem is to generate source maps that will allow us to view the unbuilt versions of our code in the browser so that we can properly debug it.

Since we have already established a scriptstask, you can simply add an additional plugin called gulp-sourcemaps that you can introduce into our pipechain, which will generate those source maps for us.

Installing a source maps plugin

To begin, we must first install the gulp-sourcemaps plugin:

npm install --save-dev gulp-sourcemaps

The following screenshot reflects the command to install the Gulp plugin:

Including...