Back our Angular 4 Book on Kickstarter.

Creating Source Maps - Building Angular 2 Applications with Gulp - Part 5

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Start with Part 1, and then read Part 2, Part 3, and Part 4.

This entry will teach you about Source Maps. With a TypeScript application, the code running in the browser is not the same as the code we wrote. It has been translated from one language, TypeScript, to another, JavaScript. When an error occurs how can we debug it? The answer is to create a source map. We can look at the source maps in the browser, to learn where we went wrong in the TypeScript code. The usual browser debugging tools, such as break points and watches, will work with source maps.

Install Source Map Plugin

Gulp has a source map plugin that allows us to easily create source maps. First install it:


npm install --save-dev gulp-sourcemaps

You'll see something like this:

The plugin is now available to use within your gulp script.

Generate Source Maps

The first step is to load the source map plugin in your gulpfile.js:


var sourcemaps = require('gulp-sourcemaps');

I am going to add a configuration variable for the location of the maps:


var mapPath = 'maps';

I like to keep my maps separate from the generated code, but you do not have to specify a separate path if you do not prefer.

Now, you can add the source map generation to the buildTS task. First, here is the task unedited:


gulp.task("buildTS", ["tslint"], function() {
return gulp.src(typeScriptSource)
.pipe(tsProject())
.pipe(gulp.dest(destinationPath));
});

There are two steps to the source map generation. The first is to initialize the maps. We want to do this as close to the front of the chain as possible so that the map code can keep track of all the changes. Then we want to save the maps. We want to do this as close to the end of the chain as possible. This is the modified task body:


return gulp.src(typeScriptSource)
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write(mapPath))
.pipe(gulp.dest(destinationPath));

The second pipe calls the init() method on the source map module. The second to last pipe saves the source maps with the write() method.

Run the task:


gulp buildTS

You'll see this:

Check the build directory:

A source map was generated for each TypeScript source file. Success!

Open up the app in a browser, and bring up the source in your dev tools:

The chrome dev tools let us drill down into the TypeScript files, just as we had written them. They support watches and breakpoints, just as if the browser was running them directly. This is a very useful debug tool.

What's Next?

Te next article in this series I'll show you how to minimize the JavaScript code. Future articles will cover compiling code on the fly, and various different build techniques.

You can get all this information right now by signing up for my newsletter using the form below. Do it to help you become a better Angular 2 Developer.

Get our expanded 38-page version: Building Angular 2 Applications with Gulp.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.