Back our Angular 4 Book on Kickstarter.

Creating a Production Build - Building Angular 2 Applications with Gulp - Part 9

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, Part 6, Part 7, and Part 8.

Sometimes I like to create a build intended for production servers which does not include source maps. To make that happen, I use a gulp-if plugin to conditionally decide whether to generate the source maps, or not. First, install gulp-if:


npm install --save-dev gulp-if

You'll see an install screen like this:

Now, import the gulp-if library as part of the gulpfile.js:


var gulpIf = require('gulp-if');

Before we modify the buildTS task, let's add a variable named devMode:


var devMode = true;

This is the variable we will use to determine whether or not to generate the source maps. It is set to true by default. Primarily we will change this variable as part of tasks, not as a configuration option. Review the buildTS task:


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

We want to use gulp-if as part of the two source map statements. First replace the source map init statement:


.pipe(gulpIf(devMode,sourcemaps.init()))

Instead of just calling sourcemaps.init(), we now wrap it in a gulpIf. This will check the devMode variable and conditionally init the source maps.

Also change the sourcemaps.write() pipe:


.pipe(gulpIf(devMode,sourcemaps.write(mapPath)))

With the buildTS task updated, we can now create a task for building a production version of the app. The purpose of this task is to set the devMode value to false; and then run the cleanBuild task:


gulp.task('buildProd', function(){
devMode = false;
gulp.start('cleanBuild')
});

We can use gulp.start() to run the cleanBuild task. Running cleanBuild will delete the build directory, and then run the build task to compile the TypeScript files, move the HTML, and move the JavaScript libraries.

Run the task:


gulp buildProd

You should see this:

Take a look at the build directory:

You'll notice that the maps directory is missing; meaning that the sourcemaps were successfully bypassed when running the cleanBuild. We can use this same approach to perform other actions as part of a build process. In the future, I plan to make changes to the buildProd script to force the Angular application into production mode, instead of development mode by default.

What's Next?

I have one final entry prepared for this blog series. The next one will talk about recompiling code as you make changes.

Get our white paper for even more information:

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

Creating a Clean Build - Building Angular 2 Applications with Gulp - Part 8

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, Part 6, and Part 7.

This part of the series will show you how to delete the build directory and produce something that I call a clean build. This is important when refactoring code, which may leave remnants of old files in the build directory.

Delete the Build Directory

To delete a directory, we can use the NodeJS Plugin, del. This isn't a Gulp plugin, but can be wrapped in a gulp task. First, install it:


npm install --save-dev del

You'll see the install screen, like this:

Next, you can load the del library inside your gulpfile.js:


var del = require('del');

Create a glob array with everything that needs to be deleted:


var deletePath = [destinationPath + '/**']

The destinationPath variable is used, with a wild card after it. This tells the del task to delete everything. Next, create the task:


gulp.task('clean', function () {
return del(deletePath);
});

The task is named clean. It calls the del() module with the deletePath value. Run the task:


gulp clean

You'll see this:

Check your project directory:

The build directory is noticeably absent, which is exactly what we want.

Run Clean, then Build

Let's combine the clean task with the build path. To do that we'll want to run the two tasks in sequence, as we don't want the clean task to delete files the build task is creating. To do that we'll use a gulp plugin named run-sequence.

Install the plugin:


npm install --save-dev run-sequence

You'll see this:

With it installed, we can create an instance of it in the gulpfile.js:


var runSequence = require('run-sequence');

Then, create the task:


gulp.task('cleanBuild', function () {
runSequence('clean', 'build');
});

I named the gulp task, cleanBuild. It uses the runSequence library to run the clean task--which deletes everything in the build directory, and the build task--which will create a fresh build.

Run the task:


gulp cleanBuild

You'll see something like this:

You see that the clean task is run first; and after it is finished the build tasks start. This will delete the build directory and all other relevant files, and then re-generate using the other tasks we wrote about earlier in this chapter.

What's Next?

The next part of this series will create what I call a production build. The final part will show you how to watch directories for changes while the code is in development.

Sign up to our mailing list to get an expanded version of this series.

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

Creating a Simple Build Task - Building Angular 2 Applications with Gulp - Part 7

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, Part 6.

In previous parts of this series, we created a lot of different build tasks. One for validating the TypeScript, one for compiling the TypeScript, and a few tasks for copying JavaScript and HTML files. What if we want to run them all in one command? This article will show you how.

It is pretty simple to create a Gulp task which will run multiple other Gulp tasks:


gulp.task("build", ['buildTS', 'copyJSLibraries',
'copyAngularLibraries','copyHTML']);

This creates a new Gulp task named build. The argument to the task is an array and each element of the array is a string which represents another Gulp task. We saw this approach with buildTS task built in Part 3. In that part, the tslint task was executed as part of the buildTS task. In this case, the build task does not have its own functionality it just combines together the existing tasks.

Run this task:


gulp build

You'll see something like this:

All the tasks are run, creating a build.

What's Next?

The next part of this series will show you how to delete everything in the build directory before creating the build. I call this approach a clean build.

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.

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.

Thoughts on Adobe's ColdFusion Roadshow in New York

Adobe had a ColdFusion Roadshow Event in New York last week and I attended. I had a moment between two projects, so I thought why not take a trip to the city and network a bit?

I wanted to formalize some of my thoughts about the event in no particular order.

I was personally invited by Kishore Balakrishnan, the Senior Product Marketing Manager for Adobe ColdFusion. I'm not sure why I got the invite. My software development company has been an Adobe partner in the past, but not in ages. I was part of the Adobe ACP program in the past, but am not currently a member. It could be that they just emailed everyone who had downloaded CF from their website. I'm not sure, but I also didn't ask.

The even was sparsely attended, maybe 20 people tops. I did meet someone from one town over who is running a medical startup that plans to use ColdFusion. That was a treat.

The event started with a presentation by Elishia Dvorak about What's new in ColdFusion 2016. My big takeaway was that they had built an API Manager tool. This is a way to manage REST APIs, whether they are built in CF or something else. This is a completely separate product from ColdFusion. I sounded to me like a proxy or entry point that could be used to manager other APIs, load balancing, documentation, and user management. I can see a benefit if you're a big company moving to a reusable service based architecture to power your organization, or a company whose business is providing services to external clients or vendors. It was an interesting approach. Since I've focused on UI Programming I don't know what else is out there that does that. If you need something like this, and are already a ColdFusion customer, it is worth checking out.

Everything else new to CF was related to performance, security, and stability. Apparently when Adobe talks to customers there are the three areas of focus. I'm not surprised, though. ColdFusion is a mature technology that does what I need it to do. What is left to add? I've had trouble answering that question for 10 years.

Then Kishnore got up to present about Tackling Future Challenges using ColdFusion. He started by talking about how ColdFusion success. Apparently ColdFusion is thriving. They said that each release doubles the sales of the previous release. I'm a bit surprised by the numbers. The next version of ColdFusion will be released in 2018, the only feature I can recall was a revamped version of CFScript which will offer more OO Features. And of course, more stability, better performance, and better security. All good things, but not the whiz bangy features to make new people interested.

Since ColdFusion is doubling it's sales with each release that means there must be a huge demand, right? Nope! The two biggest complaints from the audience were the inability to find CF Developers and the inability to find CF Jobs. I hope those two networked with each other. My impression is that the ones who can't find CF Developers are you for beginners. The bulk of CF Devs have lots of experience with it, and no new blood is coming into the fold. Kishnore suggested that CF is easy to train people in. I agree. However, another attendee complained that it is hard to book people for CF Training courses from major training centers. The course always gets cancelled last minute because not enough people signed up. That is troublesome and won't help train up a new breed of devs. The topic of IDEs came up. A lot of people complained about CF Builder, how it is a mess, but and how they still use Dreamweaver. I have to admit this surprised me to find people are using Dreamweaver for coding? I admit that Eclipse, which is the base of CF Builder, takes a learning curve. For simple code hinting, IntelliJ has addressed my needs well. It is also worth nothing that CF Builder is now included with the license cost of CF. That's a nice touch.

The topic of Rapid Application Development came up, and the attendees agreed that CF is RAD. I agree, especially when compared to Java. However, a lot of attendees said nothing can beat CF. I'm not sure that is still the case. One big benefit to CF being a RAD language is that it is loosely typed. However, a lot of server platforms offer that today. I was left with the impression that a lot of attendees had not played with more current tech. I do expect that you'll be more effective when dealing with a tech you've worked with for 20 years than you will be with something you just learned. But, once up the learning curve of new technology I'm not sure CF has the lead many championed. I worry that CFs push to add more Object Oriented features may hinder CF's RAD ability.

With such high sales numbers, I'm a bit surprised that they couldn't get a bigger crowd in NYC. My perception is that CF has big usage in government, but it seems all but abandoned in the commercial markets I usually work in.

Those are some random thoughts on the experience. Primarily I focus on UI technologies these days, but still have a few CF clients and every now and then. I'm glad I could fit the visit into my schedule. I'm glad CF is still around and kicking.

Check out my Angular 4 Book Kickstarter

I launched a Kickstarter for an Angular 4 book. Check it out here. There are a lot of details on the Kickstarter page. I kept the price low, but that means I need a lot of backers. The full book will be released under a Creative Commons License upon completion. This is your chance to help me create a great tutorial resource for the Angular community.

What are you waiting for? Back now!

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.

Copying Static Files - Building Angular 2 Applications with Gulp - Part 4

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

This entry will show you how to use Gulp to copy files. We'll copy the Angular libraries from the node_modules directory to the build directory, HTML files from the source directory to the build directory, and JavaScript files from the source/js directory to the build directory. These can be done using Gulp directly, you will not need to install additional plugins.

Copy the Angular Libraries

There are a lot of required Angular libraries and we don't want to write a script for each one. Thankfully, we don't have to, as we can specify an array of glob directories to cover all the relevant libraries:


var angularLibraries = [
'core-js/client/shim.min.js',
'zone.js/dist/**',
'reflect-metadata/Reflect.js',
'systemjs/dist/system.src.js',
'@angular/**/
bundles/**',
'rxjs/**/
*.js',
'angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
]

This covers all the JavaScript libraries required for Angular 2 applications such as zonejs and the shim library. It includes the Angular library bundles and the SystemJS library. The use of globs wildcard match files make it easy to find the relevant files needed.

Next, we'll need a destination path to put the libraries:


var destinationPathForJSLibraries = destinationPath + '/js';

I put all the external libraries in the 'js' directory as an organizational tactic. Now the actual task:


gulp.task('copyAngularLibraries', function () {
gulp.src(angularLibraries, {cwd: "node_modules/**"})
.pipe(gulp.dest(destinationPathForJSLibraries));
});

The task is named copyAngularLibraries. It is simple. It takes the array as a source. The cwd flag with the src specifies the current working directory, meaning all the libraries are located in node_modules. Then the task specifies the destination path. This will copy all the required angular files from the node_modules directory to the build/js directory.

Run this task:


gulp copyAngularLibraries

You should see results like this:

You should see an updated build directory:

This is the first step.

Copy JS Libraries

If we have any JavaScript libraries put in the src/js folder we want to copy those to the build directory. The SystemJS Configuration file is one example. The same approach from above can be used, but is even simpler since there are less directories to deal with.

First, create a glob array to find the JS files:


var javaScriptLibraries = [sourceRoot + 'js/**/*.js'];

Then create the task:


gulp.task('copyJSLibraries', function () {
gulp.src(javaScriptLibraries)
.pipe(gulp.dest(destinationPathForJSLibraries));
});

This is a simple task that specifies the input source and the destination. It uses the same destination variable that was used for the Angular libraries in the previous section.

Run the task:


gulp copyJSLibraries

You'll see this:

Check the build directory and see the final file:

The systemjs.config.js file was successfully copied from the src directory to the build directory.

Copy HTML Files

If you're using my Hello World app, it only has a single HTML file. It is likely that a full app will have more, especially if you use external HTML templates. I want to write a task copy all HTML Files from the src directory to the build directory. First, create a glob array to find the HTML files:


var htmlSource = [sourceRoot + '**/*.html'];

Then create the task:


gulp.task('copyHTML', function () {
return gulp.src(htmlSource)
.pipe(gulp.dest(destinationPath));
});

This is a simple task that specifies the input source and the destination. It uses the same destination variable that was used for the Angular libraries in the previous two sections. It could be easily combined with the copyJSLibraries task, however I prefer to keep them separate for logistical reasons, since HTML files and JS files are different. Run the task:


gulp copyHTML

You'll see this:

Check the build directory and see the final file:

The index.html file was successfully copied from the root of the src folder to the root of the build directory.

If you're using our sample Hello World application, a side effect of finishing this part is that your app will run in the browser:

Not an interesting app, but proof our scripts work.

What's Next?

Even though we have a workable application now; there is still a lot we can do as part of our build scripts. In the next article in this series I'll show you how to create source maps. Later articles will cover JavaScript minificiation, how to compile 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, so do it and be on your way to become an expert Angular 2 Developer.

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

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.

Linting TypeScript - Building Angular 2 Applications with Gulp - Part 2

This is part of an ongoing series about building Angular 2 TypeScript applications with Gulp. Check out Part 1 here.

This section will build a Gulp task for Linting TypeScript. The lint tool is a syntax checker that looks for errors.

Install Dependencies

First, install a NodeJS Plugin, tslint and a gulp plugin, gulp-tslint.

Run this code:


npm install --save-dev tslint gulp-tslint

You should see results like this:

Once the install is complete, you're good to start creating your gulpfile.js

Create the Gulp Lint Task

If you don't already have one, create a file named gulpfile.js in the root directory of the project. Our first task to create is going to lint the TypeScript code. The first step is to import the gulp and gulp-tslint libraries:


var gulp = require("gulp");
var tslint = require('gulp-tslint');

This will make them available for use within our gulp script.

Next, I'm going to define the location of the typeScriptSource:


var sourceRoot = "src/";
var typeScriptSource = [sourceRoot + "**/*.ts"];

This is split up into two variables. The first just points to the source directory and that will be used throughout our script. The second uses the sourceRoot to create a wildcard glob that will cover all existing type script files in the main directory.

Now, create the gulp task to lint the TypeScript:


gulp.task('tslint', function() {
});

This is an empty task that does nothing. Use gulp.src() to tell gulp which items to process:


return gulp.src(typeScriptSource)

Then, run the tslint() task:


.pipe(tslint({
formatter: 'prose'
}))

This will parse the TypeScript, and make a collection of any errors. Then, report the errors:


.pipe(tslint.report());

That is the completed task. Before we run it, we'll need to configure it. Specific configuration options are beyond the scope of this article. Put this tslint.json file, in your root directory and you'll be fine. The file comes from the official Angular 2 Quickstart documentation.

Run the task:


gulp tslint

You'll see something like this:

No issues. What happens when there are issues? I removed a semi-colon and added some random characters to the main.ts file and reran the lint process:

It correctly found the error. The lint process performs a syntax validation; it does not validate the code for accuracy of imports or other bugs; but those will be flagged as part of the compilation process which we'll tackle in part 3.

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

More Entries

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.