TypeScript - Compile with Gulp

TypeScript - Compile with Gulp

Brett M. Nelson - Saturday, December 12, 2015

TypeScript

Some times you just want to make a few quick changes to your code and not have to wait for your full IDE to start-up. At those times you have have to use the command line to compile your TypeScript. But typing tsc app.ts --module amd --target es5 can get tedious, sure you could use the --watch option but what if you want to also applying some standards control like tslint? Well, if you configure a gulp workflow to compile your TypeScript you can make this happen. It may also provided an added benefit of taking some work off of your, possibly, overburdened IDE.

What You Need

To make it possible to use Gulp to compile your TypeScript you are going to need to install a few things first.

First Nodejs is required because npm, and gulp are booth dependant on it. Second npm is what we will use to get Gulp and gulp-typescript. Than Gulp is the build pipeline that we will configure to use gulp-typescript to compile our TypeScript to JavaScript.

Installation

If this is your first time using node and Gulp I covered installation and basic setup in a earlier post titled Visual Studio 2015 CTP 6 and Gulp - Episode I: Getting Started. The basics are still the same so I will asume you have successfully installed Nodejs, npm and Gulp.

Of course if it's been a while since you used Gulp, npm or node you may want to update to the latest versions of each one.

To get gulp-typescript we will run the command npm install gulp-typescript --save-dev and then we can get on with the show.

Configuring

In our gulpfile.ja we will do the basic set up of require gulp and gulp-typescript

gulpfile.js Begining
  var gulp = require('gulp');
  var typescript = require('gulp-typescript');

Now that we have access to Gulp and the gulp-typescript plugin we can create a gulp.task() with some clever name, I chose 'typescript'.

gulpfile.js Continued
  gulp.task('typescript', function() {
    return gulp.src('app/**/*.ts')
    .pipe(typescript())
    .pipe(gulp.dest('./app/'));
  });

We've seen the gulp.src() and gulp.dest() before, along with the .pipe(). Set up this way we will get all the .ts files in our app/ directory and run them through the TypeScript compiler when we call typescript(). When we run gulp typescript though we may get some errors.

PS E:WorkspaceTypeScript> gulp typescript  
[22:31:54] Using gulpfile E:WorkspaceTypeScriptgulpfile.js
[22:31:54] Starting 'typescript'...
appapp.ts(1,15): error TS1148: Cannot compile modules unless the '--module' flag is provided.  
[22:31:55] TypeScript: 1 semantic error
[22:31:55] TypeScript: emit succeeded (with errors)
[22:31:55] Finished 'typescript' after 710 m

Here it says I didn't specify a --module flag, this is an issue since my file exports a class. To remedy this we will need to specify some options. To set the options for our compilation we pass in a configuration object when we call the our typescript(). Something along the lines of { module: 'system' }

Final Configuration
gulp.task('typescript', function() {  
    return gulp.src('app/**/*.ts')
    .pipe(typescript({
        module: 'system'    
    }))
    .pipe(gulp.dest('./app/'));
});

Reap the Rewards

Now when we run gulp typescript things should work a little different.

PS E:WorkspaceTypeScript> gulp typescript  
[23:25:42] Using gulpfile E:WorkspaceTypeScriptgulpfile.js
[23:25:42] Starting 'typescript'...
[23:25:43] Finished 'typescript' after 71

Now our can use our compiled JavaScript, yay!

Conclusion

Using a build pipeline to compile your TypeScript allows for more flexibility in what happens when it's compiled along with allowing you to choose when it's compiled. Both of these features make it an appealing alternative to relying on your IDE to compile your TypeScript. Of course you may have a different opinion on the topic. If so let us know by leaving a comment bellow or, if you are feeling a little introverted, send an email to me at brett@wipdeveloper.com.

Tags