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:![]()
Now, import the gulp-if library as part of the gulpfile.js:
![]()
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.
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.
Notice that you are not sent back to the console prompt after running this. The task is waiting for something to happen. Change the main.ts file by adding something simple like this to the end:
The changed file was output the console, and the buildTS was re-run. The buildTS task runs tslint before building the code; that has not changed.
This will create a package.json file that will look something like this:
With TypeScript installed, you're ready to write your first Typescript application.
You aren't given a lot of feedback, but if you check the directory, you'll see a hello.js file:
Congratulations! You've created your first TypeScript application.
You may expect the outer loop to loop 10 times, but it only loops once. That is because the inner loop changes the value of the counter variable and the stop condition triggers the second time the outer loop tries to run.
Change the var to let:
I cut off the full output since it was very long, but you can run the code to see that both the inner and outer loop both execute a full 10 times using the let value.
A benefit of enums is that we can control the number scheme:
Now our text numbers match up with the actual text index. We can control the numbers even if they aren't in sequential order. Add a new entry to the MyNumbers enum:
Enums provide a lot of flexibility.
Enums can also be created to use a string based index, and we'll discuss that in the next article.
Enums are an interesting data type, caught somewhere between an array and a class.
Instead of outputting the data in the array, it outputted the index. The proper way to use a for-in loop in TypeScript would be like this:
All version of ECMAScript after 2015 support for-in loops the same way that TypeScript does. This is supported by most browsers and in fact that
generated JS Code uses for-in loops:
By the same token, we can access the messageIntro static value:
Our final code is to output the value to the screen:
In a non-sample application, I might try to make my classes more discrete. Since this one adds a line break at the end of the message, it is conflating data processing and display code, something which is undesirable in real world applications.
It works as expected.
I have one more entry into this introduction to TypeScript series. It will tell you how to create Modules from your class and interface files.
Now load the app in the browser:
Congratulations! This series should have given you all the information you need to know to start using TypeScript to build your applications. Check out our book on Angular 4 which uses TypeScript heavily.