typescript output order - gulp equivalent to tsc with tsconfig.json

Question

Given a tsconfig file and using command-line tsc, everything is working as it should. However, using gulp-typescript with a tsconfig.json and outFile specified creates different output ordering - my problem is that I can't find a gulp way to generate the same javascript as tsc does.

Our build workflow is based on gulp; but tsc is the gold-standard, has a nice watch feature, and has broad tooling support (eg http://dev.ivogabe.com/using-vscode-with-gulp-typescript/). It would be great if I could make our gulp-based build work the same as tsc.

Example tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "preserveConstEnums": true,
    "outFile": "out/out.js",
    "sourceMap": true,
    "target": "es5",
    "noEmitOnError": true
  },
  "exclude": [
    "node_modules",
    "out"
  ]
}

Example gulpfile.js:

"use strict";
var gulp = require('gulp');
var typescript = require('gulp-typescript');

var tsProject = typescript.createProject('tsconfig.json');

gulp.task('typescript:compile', function () {
    var tsResult = tsProject.src()
        .pipe(typescript(tsProject));

    return tsResult.js.pipe(gulp.dest('out'));
});
gulp.task('default', ['typescript:compile']);

Again, my problem is that tsc with the above tsconfig.json; and gulp with the above gulpfile.js and tsconfig.json (using gulp-typescript) produce different output ordering for a non-trivial directory of typescript files. Developers should be able to switch between the two build processes arbitrarily and remain confident that they didn't miss an output ordering bug.

I don't understand the difference between the output ordering rules used for tsc and gulp-typescript, so I haven't been able to create a simple repro case for this problem. But ideally gulp-typescript when using a tsconfig project would use the same ordering as tsc.

I can solve this by using a "child-process".exec to call tsc, but gulp-typescript has better gulp integration; I'm also open to using any other gulp plugins that call the typescript compiler directly (and use the tsconfig.json project file), but I haven't been able to find one.

Answer 1

my problem is that I can't find a gulp way to generate the same javascript as tsc does

TypeScript has an internal implementation of ordering that does it by:

• Order of files passed in the command line. If you are tsconfig this is not relevant.
• Order in which the files are detected. Since you are using tsconfig it will start at the first file and then order the others by references and import directives.

Note: This is not available to API consumers (like gulp). Also this can lead to issues even with just tsc : https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

So use external modules : https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

And here is a quickstart : https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html