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, it simply leads to the compiled and unreadable code.
Modern browsers have some features that will make their best attempt to make the compiled code readable; however, all of the variable and function names have likely been renamed to save on file size. This is still too unreadable to be practical and beneficial.
The solution to this 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 scripts
task
, 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.