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:

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

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:

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.