I have some great news.

The same plug in we use to create our Sass source maps,

can be used to create JavaScript source maps as well.

But first let's check out what life is like without source maps.

Let's put an error in our JavaScript.

I'll go to our main.js file and create a variable.

And assign it to another variable that's not defined.

Variable foo = bar, which isn't defined.

Now I'll recompile our app.js file by running gulp.concat Scripts.

Now let's fire up our development server.

And go preview our app.

It's gonna refresh the page with my developer tools

open in the Console tab here.

I can see my error in bright red.

This is super useful for me.

But this is pretty scary.

Our error is on line 10,540, now in our case,

this happens to be the very last line in the file.

So it'd actually be pretty easy to locate.

Now imagine if this error was taking place somewhere else in the file,

now imagine if we had 50 or 60, or 200 source files.

I would have to hunt across all those files to find our error.

Let's jump to our gulp file,

and add source maps to improve our debugging process.

In my concatScripts task, I'm going to initiate the source maps the same

way we did with the source maps in our Sass task.

I'm going to take the pipe of source files and run maps.init.

Then I'll take the results of the concat task, and

pipe that to the maps.right method.

Remember, the parameter you provide to the right method

is the path to where you want the source map's file to live.

However keep in mind,

this path is relative to the path provided to gulp.dest.

In our case, we want the maps to live directly adjacent,

or as a sibling, to the apps.js file.

However there are use cases for doing things differently.

Imagine you stored all of your source map files in a directory called maps.

Then you might want to provide the maps as a parameter to the right method that

created a maps folder one directory up, perhaps like this.

But for us, we'll just have it as a sibling of app.js.

Now we'll run that task again.

Far up our development server, now when I refresh the page here,

here's my error in bright red.

But now I see the original file that the error is coming from.

And this makes it incredibly easy to locate where these bugs are, and

to easily fix them.

Nice work so far, you're already doing some really useful and

powerful things with Gulp.

Next I'm going to teach you how to use Gulp as part of a real workflow

by putting together multiple tasks to create task pipelines.

Keep it up!