Compile Typescript with Gulp

Gulp is a build tools that can be used, among other things, as a Typescript compiler and sourcemaps generator.
As you know, Typescript is a superset of Javascript which offer you static typing, classes, interfaces;  Sourcemaps are additional files that allow you to debug, from the browser debugger, source files (typescript files) instead of Javascript files.

Visual Studio Typescript build

Every time you save a Typescript file from Visual Studio, you can see that the associated js and maps files are updated; this option can be manage in the project settings:

compileOnSave
And the same event occur every time the project is built; to disable this feature, there is an option in the typescript property file:

typescriptProperty

Once you changed this setting for all typescript files, the Visual Studio Typescript compiling is disabled and the typescript files will no longer been updated.

Tasks

In order to compile Typescript files with Gulp, you need to install these plugins:

npm install gulp-typescript –save

npm install gulp-sourcemaps –save

The first plugin is to compile Typescript and generate Javascript files; the second one is the plugin for Sourcemaps.

Once installed you need to include them in the gulpfile.js:

var gulp = require('gulp'),
ts = require('gulp-typescript'),
sourcemaps = require('gulp-sourcemaps')

The next step is to write the Gulp task:


var tsProject = ts.createProject({
target: 'ES5',
module: 'CommonJS',
noExternalResolve: false,
noEmitOnErrors: true,
noImplicitAny: true
});

gulp.task('typescript', function () {
var tsResult = gulp.src(config.ts)
.pipe(sourcemaps.init())
.pipe(ts(tsProject));

return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.jsBasePath));
});

There are several options for the Typescript compiler; one of that is the external module system, which in case of Node.js is CommonJS.

Another option is noImplicitAny that force the developer to declare the type for any object used in the Typescript file.

Now you can run the task and see the files in the app folder:

files

The last step is enable build every time a typescript file is saved; in order to do that, you can use gulp watch:

gulp.task('watchTypescript', ['typescript'], function () {
gulp.watch(config.ts, ['typescript']);
});

You can find the project here.

Advertisements
Compile Typescript with Gulp

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s