Back our Angular 4 Book on Kickstarter.

Compiling TypeScript - Building Angular 2 Applications with Gulp - Part 3

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

This section will build a Gulp task for compiling TypeScript into JavaScript.

Install Dependencies

First, install a gulp plugin, gulp-typescript.

Run this code:


npm install --save-dev gulp-typescript

You should see results like this:

This makes the gulp-typescript plugin available for use in our gulpfile.js.

Compile TypeScript to JavaScript

Before we start the compilation task, let's create some variables. First, the destination path for the output files:


var destinationPath = 'build';

I always put the processed files in a directory called build. Then, create an instance of the gulp-typescript module:


var tsc = require("gulp-typescript");

Use the gulp-typescript library to create a project:


var tsProject = tsc.createProject("tsconfig.json");

This refers to an external tsconfig.json file. I don't want to expand on the full details of the config file; but there are two important things I want to draw attention to. The first is a few items in the compilerOptions:


"compilerOptions": {
"target": "es5",
"module": "commonjs",
}

The module type is 'commonjs' which is the module type used behind the scenes by Angular 2. The second important thing here is the target, es5. This stands for EcmaScript 5; JavaScript is an implementation of and most browsers support.

The second important item in the config file is:


"exclude": [
"node_modules"
]

The exclude option tells the type script project not to process files in the node_modules directory. In essence, it ignores all the Angular libraries installed via NodeJS. These libraries already come with compiled bundles. We'll deal with moving those later.

Now, create a buildTS task:


gulp.task("buildTS", ["tslint"], function() {
});

This gulp task is named BuildTS. Before this task is run; the tslint task will execute. The tslint task was created in the previous part of this series. The main task first specifies the source:


return gulp.src(typeScriptSource)

It uses the same typeScriptSource variable that the tslint task used. Then, it adds the tsProject as a gulp pipe:


.pipe(tsProject())

Finally, it specifies the destination path:


.pipe(gulp.dest(destinationPath));

What the full script does is take all the TypeScript files in our source directory, run them through the gulp-typescript compiler, and save the output to a build directory.

Run the script:


gulp buildTS

You'll see results similar to this:

You can see from the output that both the tslint and buildTS process ran. No errors; so let's review the output.

Review Generated JavaScript Code

Look in your project directory and you'll see a brand new build directory:

Each TypeScript file was turned into a JavaScript file. Let's examine the main.js file; as it is simple:


"use strict";
var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
var app_module_1 = require("./app.module");
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);

The first thing you'll notice is that the JavaScript iteration replaces the import statements with require statements.

You'll recognize the require statement from the NodeJS code we are writing. However, browsers don't inherently support that. This is here because of commonJS module creation was specified in the compiler options. The systemJS library allows require() to be used in the browser, and that is what Angular 2 uses.

Beyond that, the JavaScript code is not all that different from the original TypeScript code. You can review the other two JS files and you'll find similar results.

What's Next

The first few articles of this series focused on TypeScript, but the full intent is to provide you with everything you need to build your own applications. The next in the series will focus on moving the JavaScript Libraries and HTML files from their install locations to the build directory.

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.