Gulp Workflow with TypeScript

• Download external link

Introduction

JavaScript's standards are constantly changing and different versions of the ECMA Scripts have been adopted by various vendors at various times. Google Angular development team embraced TypeScript open-source project by Microsoft for their latest re-write of Angular2 framework. That leaves all of the existing investment of Angular in a state of transition.

The goal of this tip is to provide a first step of migrating existing Angular applications that utilize TypeScript to write Gulp to build workflows for your projects.

On a personal note, I prefer well-structured code with the ability to divide it into sections instead of being overwhelmed by DevOps code. TypeScript provides us with the ability to write classes for reuse within the Gulp Tasks.

Background

This tip assumes the basic knowledge of Node.js, Gulp and Angular Js.

Setting Up the Project

Please make sure that you have the following installed:

1. Git for your operating system of choice
2. Node.js
3. Visual Studio Code

To get the source code for this tip, use Git to clone it like so:

> git clone -b 01-init https://github.com/kdcllc/Angular-TypeScript-Starter.git

If you don't have Git installed on your machine and would like to follow the steps, you can download the source here.

Once the project is downloaded and created on your machine, navigate to the project and run the following command:

> code .

This will open the source code within Visual Studio Code.

Next, run the following:

1. Npm install - This will download all of the project dependencies and install them in the project directory
2. Tsd install – This will install all of the definitely typed files for the project.

   

3. Gulp – this will run the default Gulp task written in TypeScript.

   

So, if you followed the steps listed above and were successful in executing your first Gulp tasks written in TypeScript - Congratulations!

Now, let’s highlight the project setup.

• First, npm package ts-node allows the execution of Gulpfile.ts.
• Second, tsconfig.json file contains the TypeScript compilation settings.
• Third, tools/typings/tsd folder contains all of the definitely typed files that we are going to use for our tooling.

Wrap-Up

The project contains a minimal amount of code, but allows you to begin converting existing Gulp JavaScript based workflows to Gulp TypeScript workflows.