gulp-typescript

What is gulp-typescript?

gulp-typescript is a TypeScript compiler for gulp, a toolkit that helps automate time-consuming tasks in your development workflow. It allows you to integrate TypeScript compilation into your gulp build process, providing a seamless way to compile TypeScript files into JavaScript.

What are gulp-typescript's main functionalities?

Basic Compilation

This feature allows you to compile TypeScript files into JavaScript. The code sample demonstrates how to set up a basic gulp task to compile TypeScript files using a tsconfig.json configuration file.

const gulp = require('gulp');
const ts = require('gulp-typescript');

const tsProject = ts.createProject('tsconfig.json');

gulp.task('scripts', function () {
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest('dist'));
});

Incremental Compilation

This feature enables incremental compilation, which can significantly speed up the build process by only recompiling files that have changed. The code sample shows how to enable incremental compilation by setting the 'incremental' option to true.

const gulp = require('gulp');
const ts = require('gulp-typescript');

const tsProject = ts.createProject('tsconfig.json', { incremental: true });

gulp.task('scripts', function () {
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest('dist'));
});

Source Maps

This feature allows you to generate source maps for your TypeScript files, which can be very useful for debugging. The code sample demonstrates how to integrate source map generation into your gulp task.

const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');

const tsProject = ts.createProject('tsconfig.json');

gulp.task('scripts', function () {
  return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist'));
});

Other packages similar to gulp-typescript

typescript

The 'typescript' package is the official TypeScript compiler. It can be used directly via the command line or integrated into build tools like Webpack or Rollup. Unlike gulp-typescript, it does not provide built-in support for gulp, so additional configuration is needed to use it in a gulp workflow.

ts-loader

ts-loader is a TypeScript loader for Webpack. It allows you to compile TypeScript files within a Webpack build process. While it offers similar functionality to gulp-typescript, it is specifically designed for use with Webpack rather than gulp.

awesome-typescript-loader

awesome-typescript-loader is another TypeScript loader for Webpack. It is known for its performance optimizations and additional features like caching. Similar to ts-loader, it is intended for use with Webpack and not gulp.

README

gulp-typescript

Compile TypeScript

Issues with the output should be reported on the TypeScript issue tracker.

Install

npm install --save-dev gulp-typescript

Example

var gulp = require('gulp');
var typescript = require('gulp-typescript');

gulp.task('default', function () {
	gulp.src('app.ts')
		.pipe(typescript())
		.pipe(gulp.dest('dist'));
});

License

MIT © Sindre Sorhus