Add an equivalent to `gulp.watch` on `tsproject`

[Lenne231]

I would like to use a tsconfig.json file and incremental compilation together but there is no tsproject.watch() to watch all files defined in a tsconfig.json file.

[ivogabe]

I'm afraid that this is difficult to implement. In most cases you can use wildcards in gulp.watch to get this working, like lib/**/*.ts. Can you give some more background on your setup why you'd need this?

[rayshan]

If you just don't want to declare the file paths in tsconfig.json again you can do:

let tsPaths = require("./tsconfig.json").files;

I typically watch both ts files and other vendor js scripts together, so doing ts automatically won't really help all the way.

[chanon]

You can also use gulp-watch together with this module.

I've got an example here:
#228 (comment)

if you use normal gulp.watch just do

gulp.watch(tsproject.config.files, ... whatever ... );

[glen-84]

I need this as well.

tsproject.config.files doesn't help if you're using exclude.

Once microsoft/TypeScript#5980 is merged, include will also need to be handled.

[Coridyn]

@glen-84
Basarat's tsconfig project is a good option until globbing is supported by the TypeScript compiler.

You can add a custom filesGlob property in your tsconfig.json file:

{
    // regular tsconfig.json properties here.
    // ...

    // Custom `filesGlob`:
    "filesGlob": [
        "**/*.ts",
        "other/file/to/include.ts",
        "!src/temp-dir/**/*.ts"   // Specify excludes as well
    ]
}

Then use tsconfig to load the tsconfig.json file:

var tsconfig = require('tsconfig');
var project = tsconfig.loadSync(options.src);

// Then do what you want with the list of resolved files
// It's as if you'd typed them all out yourself
gulp.src(project.files)...

gulp.watch(project.files)...

The filesGlob array will be expanded/resolved into the standard files list. This is as if you had manually entered all the files yourself in the tsconfig.json file (but much easier since you didn't actually have to do that).

Here is the Incremental compilation example from the gulp-typescript readme updated to use tsconfig and filesGlob handling.

It's almost exactly the same except we use tsconfig to load the tsconfig.json file:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var merge = require('merge2');
var tsconfig = require('tsconfig');

// 1. Use the tsconfig module to load your 'tsconfig.json' file
var project = tsconfig.loadSync('path/to/tsconfig.json');
var tsProject = ts.createProject(project);

gulp.task('scripts', function() {
    // 2. The `files` array holds all of the globs/excludes
    // from `filesGlob`
    var tsResult = gulp.src(project.files)
                    .pipe(ts(tsProject));

    return merge([
        tsResult.dts.pipe(gulp.dest('release/definitions')),
        tsResult.js.pipe(gulp.dest('release/js'))
    ]);
});
gulp.task('watch', ['scripts'], function() {
    // 3. You can use it with `gulp.watch()` as well
    gulp.watch(project.files, ['scripts']);
});

[glen-84]

@Coridyn,

Thanks for that information, and I apologize for not getting back to you sooner.

Globs are now supported in TypeScript! 🎉

@ivogabe,

Should I open an issue to track support for this in gulp-typescript? (I think that some changes are probably required)

[ivogabe]

@glen-84 Can you create a new issue? Or open a PR? It's probably not very hard to add this.

[bamoqi]

Is there any progress with this issue? Currently I parse tsconfig.json to extract the include and exclude fields to construct the gulp.watch glob patterns. Is there a more API-ish way to to so?

[ivogabe]

@bamoqi I'd advise to use gulp.watch('lib/**/*.ts', ..) or something like that. I'm not sure whether the TypeScript API exports functionality to watch files. Watching is harder than it might look, as both updates to files as new files should be noticed. New files could origin from almost anywhere. I'm personally not really interested in this issue, though I would accept pull requests that implement this properly using the TypeScript API.