Front-end with TypeScript Tutorial – Step 6: Gulp

Posted by Bogdán Bikics on December 6, 2016

In Part 4 (Step 5: Using Browserify) we used Browserify to work better together with NPM imported modules, and to use our own code in a Node styled modular way. It’s time to automate all the build tasks we have so far with the help of Gulp.

Step 6: Making things more comfortable with Gulp

Although a lot of this makes us feel better, we get some things in return that do exactly the opposite. If we look at all the steps we need to take right now to make things work, the overview is quite disappointing. Right now we have to:

Compile our TypeScript files to JavaScript.

Run Browserify on our generated JavaScript files.

Remove obsolete files (cleaning)

In addition, if you clone this project using a non-frontend-ready computer (of course with NPM installed), after running NPM install, you also have to install Typings and Browserify globally (and run typings install too). And who knows what else you will need to install in the future?

This is really a lot to remember already. Ideally all these things should happen automatically, preferably every time you change anything in your .ts files. Luckily there are many build tools for the frontend which do these jobs instead of us. In this tutorial we will use Gulp.

Let’s install gulp-cli and Gulp:

npm install --global gulp-cli
npm install --save gulp

Now you have Gulp in your command list. Gulp-cli is responsible to run your Gulp tasks which we will soon create. When you run Gulp, it will search for a file named “gulpfile.js”.

Before we create this file, we’ll first clean up a bit. Since TS compiling is taken care of by Gulp (tsify), let’s remove this part from the “tsconfig.json” file:

"files": [
"./typings/index.d.ts",
"./typescript/main.ts"
]

And put this in its place:

"exclude": [
"node_modules",
"javascript",
"view"
]

We just list all the folders here that do not contain typescript files. For your Gulp build this is actually not important at all, but it’s useful for the fly TS compiling done by your IDE.

Let’s create the “gulpfile.js” file in the root, and let’s tell it to compile TypeScript and Browserify it after cleaning the target folder, and also take care of typings for us!

[Note: Gulp runs on Node.js so you can use ECMAScript 6, as you will see in the code below.]