Gulpfile that efficiently compiles only changed TypeScript files

Question

I'm trying to make gulp compile and watch TypeScript files. This is what I have got so far

var tsProject = plugins.typescript.createProject(
{
    removeComments: false,
    target: 'ES5',
    module: 'amd',
    noExternalResolve: false,
    noImplicitAny: false,
});

var typescriptGlob = [
    presentationScriptsDir + '**/*.ts',
    definitelyTypedDefinitions
];

gulp.task("compile-typescript", function () {
    return gulp.src(typescriptGlob)
        .pipe(plugins.typescript(tsProject))
        .pipe(gulp.dest(presentationScriptsDir));
});

gulp.task("watch-typescript", function() {
    return gulp.watch(typescriptGlob, ["compile-typescript"]);
});

I am using gulp-typescript.

However, since we have hundreds of TypeScript files I don't want to recompile all files every time one of them changes. The code above does that (I can tell because watch-typescript takes at least as much time as the compile-typescript)

I have tried using gulp-changed, like this

gulp.task("compile-typescript", function () {
    return gulp.src(typescriptGlob)
        .pipe(plugins.changed(presentationScriptsDir, {extension: '.js'}))
        .pipe(plugins.typescript(tsProject))
        .pipe(gulp.dest(presentationScriptsDir));
});

That indeed filters out unchanged files. But then the typescript compiler reports errors since it only gets a single file, which lacks type declarations that it normally gets from other files.

I do not want to set the noExternalResolve flag to true, since then a lot of type checking will not be done, which defeats a lot of the reason for using TypeScript in the first place.

How can I write this gulpfile better?

score 7 · Accepted Answer · answered Nov 25 '14 at 19:36

The TypeScript compiler does not go through the separate compile and link phases like most language compilers do. So, it really can't accomplish incremental compilation.

Like you said, to get the type-checking, the compiler needs to load and at least re-parse all of the files that might be referenced.

What we have done in our project is to use Visual Studio's support to "Compile on save" which will generate the .js files for us while we're developing and debugging. (Apparently that mechanism uses the noExternalResolve feature). Then we rely on our unit test process and continuous integration server to run a regular TypeScript compile to get all the syntax and typing errors.

So I'd suggest to run your watch with the noExternalResolve flag but also include a step in your workflow to run the full TypeScript compile at important points. Maybe you can specify a certain "root" file that starts a full compile when it's changed, or maybe you can find some other event that occurs not-too-frequently which you can use to trigger a regular compile.

@mike-shenk We also configured our editor to use the noResolve flag for rapid compilation. However, we are using amd modules and this approach breaks in one situation.If we import a file and only use that import to extend a class, that file won't get included in the emitted javascript. This is because TS with noResolve will assume that the "extends" is for extending an interface and not a class, so it will omit that import. Do you see the same thing? — Breck, May 18 '15 at 18:35

Gulpfile that efficiently compiles only changed TypeScript files

1 Answers1