A gulp plugin for handling TypeScript compilation workflow. The plugin exposes TypeScript's compiler options to gulp using TypeScript API.
Updating from version 2? See the breaking changes in version 3.
- Incremental compilation (so faster builds)
- Error reporting
- Different output streams for .js, .d.ts files.
- Support for sourcemaps using gulp-sourcemaps
- Compile once, and filter different targets
How to install
1. Install gulp CLI
npm install --global gulp-cli
2. Install gulp in the project dependency
npm install gulp
3. Install gulp-typescript & TypeScript
npm install gulp-typescript typescript
Almost all options from TypeScript are supported.
outDir(string) - Move output to a different (virtual) directory. Note that you still need
gulp.destto write output to disk.
noImplicitAny(boolean) - Warn on expressions and declarations with an implied 'any' type.
suppressImplicitAnyIndexErrors(boolean) - Suppress
--noImplicitAnyerrors for indexing objects lacking index signatures.
noLib(boolean) - Don't include the default lib (with definitions for - Array, Date etc)
lib(string) - List of library files to be included in the compilation.
target(string) - Specify ECMAScript target version: 'ES3' (default), 'ES5' or 'ES6'.
module(string) - Specify module code generation: 'commonjs', 'amd', 'umd' or 'system'.
jsx(string) - Specify jsx code generation: 'react' or 'preserve' (TS1.6+).
declaration(boolean) - Generates corresponding .d.ts files. You need to pipe the
dtsstreams to save these files.
removeComments(boolean) - Do not emit comments to output.
emitDecoratorMetadata(boolean) - Emit design-time metadate for decorated declarations in source.
experimentalAsyncFunctions(boolean) - Support for ES7-proposed asynchronous functions using the
experimentalDecorators(boolean) - Enables experimental support for ES7 decorators.
moduleResolution(string) - Determine how modules get resolved. Either 'node' for Node.js/io.js style resolution, or 'classic' (default) (TS1.6+).
noEmitOnError(boolean) - Do not emit outputs if any type checking errors were reported.
noEmitHelpers(boolean) - Do not generate custom helper functions like __extends in compiled output.
preserveConstEnums(boolean) - Do not erase const enum declarations in generated code.
isolatedModules(boolean) - Compiles files seperately and doesn't check types, which causes a big speed increase. You have to use gulp-plumber and TypeScript 1.5+.
rootDir- Specifies the root directory of input files. Only use to control the output directory structure with
See the TypeScript wiki for a complete list. These options are not supported:
- Sourcemap options (
sourceRoot) - Use gulp-sourcemaps instead.
gulp.watchinstead. See the paragraph "Incremental compilation".
project- See "Using
gulp-typescript can be imported using
const ts = require('gulp-typescript');. It provides the following functions:
ts(options?)- Returns a gulp stream that compiles TypeScript files using the specified options.
ts.createProject(tsconfig filename, options?)- Returns a project. The intended usage is to create a project outside of a task with
const tsProject = ts.createProject(..);. Within a task,
tsProject()can be used to compile a stream of TypeScript files.
tsProject.src()- Returns a stream containing the source files (.ts) from a tsconfig file. It can only be used if you create a project with a
tsconfig.jsonfile. It is a replacement for
Below is a minimal
gulpfile.js which will compile all TypeScript file in folder
src and emit a single output file called
built/local. To invoke, simple run
var gulp = ;var ts = ;gulp;
Another example of
gulpfile.js. Instead of creating the default task, the file specifies custom named task. To invoke, run
gulp scripts instead of
var gulp = ;var ts = ;var merge = ; // Requires separate installationgulp;
tsResult.js) and a definition file stream (
You need to set the
declaration option to generate definition files.
If you don't need the definition files, you can use a configuration as seen in the first example, and you don't need to store the result into a variable as
Instead of calling
ts(options), you can create a project first outside of the task. Inside the task, you should then use
tsProject(). An example:
var gulp = ;var ts = ;var merge = ;var tsProject = ts;gulp;gulp;
When you run
gulp watch, the source will be compiled as usual. Then, when you make a change and save the file, your TypeScript files will be compiled in about half the time.
You must create the project outside of the task. You can't use the same project in multiple tasks. Instead, create multiple projects or use a single task to compile your sources. Usually it is not worth to create different tasks for the client side, backend or tests.
tsconfig.json, you have to use
var tsProject = ts;
If you want to add or overwrite certain settings in the
tsconfig.json file, you can use:
var tsProject = ts;
The task will look like:
You can replace
tsProject.src() to load files based on the tsconfig file (based on
gulp-typescript isn't restricted to a single TypeScript version.
You can install the latest stable version using
npm install typescript --save-dev or a nightly
npm install typescript@next --save-dev.
You can also use a fork of TypeScript, if it is based on TypeScript 2.x. You can configure this in your gulpfile:
Or in combination with a
var tsProject = ts;
gulp-typescript supports source maps by the usage of the gulp-sourcemaps plugin. Configuring the paths of source maps can be hard. The easiest way to get working source maps is to inline the sources of your TypeScript files in the source maps. This will of course increase the size of the source maps. The following example demonstrates this approach:
var gulp =var ts = ;var sourcemaps = ;gulp;
When you are not inlining the source content, you should specify the
sourceRoot property. It can be configured with the following rule:
- If you don't provide the
outDiroption to TypeScript, the
sourceRootoption of gulp-sourcemaps should be the relative path from the
gulp.destpath to the source directory (from
- If you set the
outDiroption to the same value as the directory in
gulp.dest, you should set the
- If you set the
outDiroption to a different value, there is no easy rule to configure gulp-sourcemaps. I'd advise to change the value of outDir if possible.
Furthermore you should set
includeContent: false. Here's an example where
outDir isn't set:
Some examples can be found in ivogabe/gulp-typescript-sourcemaps-demo.
For more information, see gulp-sourcemaps.
You can specify a custom reporter as the second argument of the main function, or as the only argument when using a
Available reporters are:
- nullReporter (
ts.reporter.nullReporter()) - Don't report errors
- defaultReporter (
ts.reporter.defaultReporter()) - Report basic errors to the console
- longReporter (
ts.reporter.longReporter()) - Extended version of default reporter, intelliJ link functionality + file watcher error highlighting should work using this one
- fullReporter (
ts.reporter.fullReporter(showFullFilename?: boolean)) - Show full error messages, with source.
If you want to build a custom reporter, you take a look at
lib/reporter.ts, that file declares an interface which a reporter should implement.
- Clone this repo
git submodule update --initto pull down the TypeScript compiler/services versions used in the test suite.
- Ensure the gulp CLI is globally installed (
npm install -g gulp-cli).
- Execute the tests:
The plugin uses itself to compile. There are 2 build directories,
release must always contain a working build.
release-2 contains the last build. When you run
gulp compile, the build will be saved in the
gulp test will compile the source to
release-2, and then it will run some tests. If these tests give no errors, you can run
gulp release. The contents from
release-2 will be copied to
gulp-typescript is licensed under the MIT license.