I'm trying to make gulp pile 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("pile-typescript", function () {
    return gulp.src(typescriptGlob)
        .pipe(plugins.typescript(tsProject))
        .pipe(gulp.dest(presentationScriptsDir));
});

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

I am using gulp-typescript.

However, since we have hundreds of TypeScript files I don't want to repile 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 pile-typescript)

I have tried using gulp-changed, like this

gulp.task("pile-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 piler 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?

I'm trying to make gulp pile 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("pile-typescript", function () {
    return gulp.src(typescriptGlob)
        .pipe(plugins.typescript(tsProject))
        .pipe(gulp.dest(presentationScriptsDir));
});

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

I am using gulp-typescript.

However, since we have hundreds of TypeScript files I don't want to repile 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 pile-typescript)

I have tried using gulp-changed, like this

gulp.task("pile-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 piler 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?

• javascript
• typescript
• gulp
• gulp-watch
• gulp-changed

1 Answer 1

The TypeScript piler does not go through the separate pile and link phases like most language pilers do. So, it really can't acplish incremental pilation.

Like you said, to get the type-checking, the piler 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 pile 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 pile at important points. Maybe you can specify a certain "root" file that starts a full pile 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 pile.