Front-end with TypeScript Tutorial – Step 6: Gulp

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.]

gulpfile.js

const gulp = require('gulp');
const browserify = require('browserify');
const watchify = require('watchify');
const errorify = require('errorify');
const del = require('del');
const tsify = require('tsify');
const gulpTypings = require('gulp-typings');
const source = require('vinyl-source-stream');
const runSequence = require('run-sequence');

function createBrowserifier(entry) {
    return browserify({
        basedir: '.',
        debug: true,
        entries: [entry],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .plugin(watchify)
    .plugin(errorify);
}

function bundle(browserifier, bundleName, destination) {
    return browserifier
        .bundle()
        .pipe(source(bundleName))
        .pipe(gulp.dest(destination));
}

gulp.task('clean', () => {
    return del('./javascript/**/*')
});

gulp.task('installTypings', () => {
    return gulp.src('typings.json').pipe(gulpTypings());
});

gulp.task('tsc-browserify-src', () => {
    return bundle(
        createBrowserifier('./typescript/main.ts'),
        'bundle.js',
        'javascript');
});

gulp.task('default', (done) => {
    runSequence(['clean', 'installTypings'], 'tsc-browserify-src', () => {
            console.log('Watching...')
            gulp.watch(['typescript/**/*.ts'], 
                       ['tsc-browserify-src']);		
    });
});

To make it work, you first have to install all those dependencies listed on the top of the file.

npm install --save browserify del tsify gulp-typings watchify vinyl-source-stream run-sequence errorify

When that’s done you can start the application by typing in the command line (in your project root directory):

gulp

It does all the tasks we want, and since it’s using Gulp.watch and Watchify, it also listens to file changes and recompiles whatever is needed. If you want to stop running Gulp just press Ctrl + C.

Just for the show, open your index.html in your browser. It should list ‘Hello’ and ‘World’. Now add the new word ‘There’ to words in “main.ts”.

words = ko.observableArray(['Hello', ‘There’, 'World']);

If you refresh your browser you can see that it works! Yay!

You can run tasks separately too. When you just run ‘gulp’, the ‘default’ task is executed, if you just want Gulp to run the task, for example named ‘clean’, you can run it with:

gulp clean

Talking about cleaning. For the last time, remove main.js (or all the other .js files) from the typescript folder manually if it’s still there. It won’t bother you anymore.

Coming up next:

A code is no code without tests! In the Next Post we are going to add a Jasmine test to our code base.