Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Just like when multiple SaSS files are compiled into a larger, single file, when many JavaScript files are concatenated together it can be challenging to manage the source files. Good thing we can use source maps with our JavaScript!
-
To Follow along with this video:
- clone the course repo if you haven't done it yet - instructions here.
- option, stash your changes to the code:
git stash
- run
git checkout Stage3Video3
from within the course repo - run
npm install
to install project dependencies
- Treehouse blog on using sourcemaps: http://blog.teamtreehouse.com/introduction-source-maps
-
0:00
I have some great news.
-
0:01
The same plug in we use to create our Sass source maps,
-
0:05
can be used to create JavaScript source maps as well.
-
0:08
But first let's check out what life is like without source maps.
-
0:13
Let's put an error in our JavaScript.
-
0:16
I'll go to our main.js file and create a variable.
-
0:20
And assign it to another variable that's not defined.
-
0:23
Variable foo = bar, which isn't defined.
-
0:32
Now I'll recompile our app.js file by running gulp.concat Scripts.
-
0:41
Now let's fire up our development server.
-
0:46
And go preview our app.
-
0:50
It's gonna refresh the page with my developer tools
-
0:52
open in the Console tab here.
-
0:55
I can see my error in bright red.
-
0:59
This is super useful for me.
-
1:00
But this is pretty scary.
-
1:04
Our error is on line 10,540, now in our case,
-
1:10
this happens to be the very last line in the file.
-
1:13
So it'd actually be pretty easy to locate.
-
1:17
Now imagine if this error was taking place somewhere else in the file,
-
1:21
now imagine if we had 50 or 60, or 200 source files.
-
1:25
I would have to hunt across all those files to find our error.
-
1:32
Let's jump to our gulp file,
-
1:34
and add source maps to improve our debugging process.
-
1:43
In my concatScripts task, I'm going to initiate the source maps the same
-
1:48
way we did with the source maps in our Sass task.
-
1:52
I'm going to take the pipe of source files and run maps.init.
-
2:07
Then I'll take the results of the concat task, and
-
2:11
pipe that to the maps.right method.
-
2:22
Remember, the parameter you provide to the right method
-
2:26
is the path to where you want the source map's file to live.
-
2:32
However keep in mind,
-
2:33
this path is relative to the path provided to gulp.dest.
-
2:39
In our case, we want the maps to live directly adjacent,
-
2:44
or as a sibling, to the apps.js file.
-
2:48
However there are use cases for doing things differently.
-
2:52
Imagine you stored all of your source map files in a directory called maps.
-
2:56
Then you might want to provide the maps as a parameter to the right method that
-
3:01
created a maps folder one directory up, perhaps like this.
-
3:11
But for us, we'll just have it as a sibling of app.js.
-
3:19
Now we'll run that task again.
-
3:24
Far up our development server, now when I refresh the page here,
-
3:30
here's my error in bright red.
-
3:32
But now I see the original file that the error is coming from.
-
3:38
And this makes it incredibly easy to locate where these bugs are, and
-
3:43
to easily fix them.
-
3:44
Nice work so far, you're already doing some really useful and
-
3:48
powerful things with Gulp.
-
3:51
Next I'm going to teach you how to use Gulp as part of a real workflow
-
3:54
by putting together multiple tasks to create task pipelines.
-
3:58
Keep it up!
You need to sign up for Treehouse in order to download course files.
Sign up