How to bundle typescript files for the browser user gulp and tsproject?
<p>I'm kinda new to front end development, being a long time backend C# and Java developer, and I'm trying to come to grips with how to <em>build</em> front end applications. I would like to build an application using typescript and use gulp for my build pipeline to transpile, bundle and minify my code to a single JavaScript file.</p>

<p>For this purpose, I have been looking at the node module <a href="https://www.npmjs.com/package/tsproject" rel="nofollow noreferrer">tsproject</a> which, as far as I can understand, is supposed to do exactly what I want. Except, I can't get it to do what I want :-(.</p>

<p>This is the relevant parts my gulpfile.js:</p>

<pre><code>var gulp = require('gulp');
var clean = require('gulp-clean');
var tsproject = require('tsproject');

gulp.task('default', [ 'min-js' ]);

gulp.task('clean', function () {
    return gulp
        .src('./dist/', { read: false })
        .pipe(clean());
});

gulp.task('min-js', [ 'clean' ], function () {
    return tsproject
        .src('./tsconfig.json')
        .pipe(gulp.dest('./dist/js'))
});
</code></pre>

<p>And my tsconfig.json:</p>

<pre><code>{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "outDir": "./"
    },
    "files": [
        "./src/**/*.tsx",
        "./src/**/*.ts"
    ],
    "bundles": {
        "myApp": {
            "files": [
                "./src/App.tsx"
            ],
            "config": {
                "minify": true,
                "sourcemap": true
            }
        }
    }
}
</code></pre>

<p>I had expected this to output a single js-file containing transpiled, bundled and minified JavaScript code but what I get is a bundled (not transpiled nor minified) Typescript file (./dist/js/myApp.min.ts).</p>

<p>Am I doing something wrong or have I completely misunderstood the purpose and intent of tsproject?</p>