Gulpfile that efficiently compiles only modified TypeScript files

Question

I am trying to do gulp compilation and view TypeScript files. This is what I 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 the files every time one of them changes. The above code does this (I can say because watch-typescript takes at least as much time as compile-typescript )

I 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)); }); 

It really filters out immutable files. But then the TypeScript compiler reports errors, since it receives only one file, in which there are no type declarations, which it usually receives from other files.

I don’t want to set the noExternalResolve flag to true, since then a lot of type checks will not be performed, which first of all affects the reason for using TypeScript.

How can I write this gulpfile better?

Answer 1

The TypeScript compiler does not perform separate compilation phases and links, as most language compilers do. Thus, it really cannot perform incremental compilation.

As you said, to get type checking, the compiler must download and at least reanalyze all the files that can be referenced.

What we did in our project was to use Visual Studio support for "Compile on save", which will generate .js files for us while we develop and debug. (Apparently, this mechanism uses the noExternalResolve function). Then we rely on our unit test server and continuous integration server to run the typical TypeScript compiler to get all syntax and input errors.

So, I suggest starting your watch with the noExternalResolve flag, but also including a step in the workflow to complete full TypeScript compilation at important points. Perhaps you can specify a specific “root” file that will begin full compilation when it changes, or maybe you will find another event that does not occur too often, which you can use to start regular compilation.