Back our Angular 4 Book on Kickstarter.

Minimizing the JavaScript Code - Building Angular 2 Applications with Gulp - Part 6

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, Part 4, and UglifyJS. An important aspect of modern HTML5 development is to make your JavaScript files as small and optimized as possible. The minification process shortens variable names, removes whitespace, and deletes comments. It can perform other optimizations too. The purpose is to provide a smaller download to the end user. The process can, sometimes, be significantly especially with larger applications. UglifyJS is my preferred minimizer, so we'll use that.

Install gulp-uglify

The first step is to install the gulp-uglify module. Run this command:


npm install --save-dev gulp-uglify

You'll see feedback like this:

We are ready to use Uglify in our script.

Modify Gulp Script

First, load the gulp-uglify script in the gulpfile.js:


var uglify = require('gulp-uglify');
] Now, jump to the buildTS task. Here it is in the current state:


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

We want to run Uglify before the source map is written, but after the TypeScript is converted. Add a single line, like this:


.pipe(uglify())

The line should be placed in the script before the source maps are written:


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

The pipe() after tsProject() calls the uglify() method. We could configure the Uglify Script with various options, but for the purposes of this sample I used the default setup.

Review the Minimized Code

Run the updated script:


gulp buildTS

See it run:

The directory structure will not have changed, but the contents of the custom JS files have. Assuming you're using our default hello world application, take a look at the app.module.js:


"use strict";var __decorate=this&&this.__decorate||function(e,o,r,t){var p,n=arguments.length,c=n<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,r):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,o,r,t);else for(var a=e.length-1;a>=0;a--)(p=e[a])&&(c=(n<3?p(c):n>3?p(o,r,c):p(o,r))||c);return n>
3&&c&&Object.defineProperty(o,r,c),c},core_1=require("@angular/core"),platform_browser_1=require("@angular/platform-browser"),app_component_1=require("./app.component"),AppModule=function(){function e(){}return e}();AppModule=__decorate([core_1.NgModule({imports:[platform_browser_1.BrowserModule],declarations:[app_component_1.AppComponent],bootstrap:[app_component_1.AppComponent]})],AppModule),exports.AppModule=AppModule;

This is a minimized version of the translated TypeScript code. It includes some SystemJS configuration that we didn't write manually--that was added by the TypeScript compilation. If you look closely, you see a lot of the function arguments are changed into single character values. White space and line breaks are removed. Other optimizations can be made by the Uglify library, such as variable definition optimizations. Such things are not present in the existing code.

Run the final code in the browser, and you'll find it still runs as expected, and the source maps still work.

What's Next

The next few article in this series will talk about different build techniques, and some tasks I write to handle different options. The final article of this series will show you how to build a script that will recompile your code as changes are made on the fly.

All the information is already available, so sign up for our newsletter to start reading right away.

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.