Typescript: Compile files without mirroring the directory hierarchy

Question

I am using VS Code for making an HTML5 game with TypeScript (JS). The project is getting a little bigger and I want to store the output in a different directory. The problem is that whenever I compile everything, it mirrors the original directory hierarchy. So for example:

-dir1
--dir2
--dir3
---dir4

outputs:

-dir1
--dir2
--dir3
---dir4

(the same)

and I want:

-dir1
*.js 

I've tried Grunt/Gulp/VSCode's own TaskRunner but nothing works and "keepDirectoryHierarchy" seems depricated..

Answer 1

VS Code support two way of typescript compilation:

1. Native compilation using tsconfig
2. Using JavaScript Task Runner such as Gulp or Grunt

Native compilation using tsconfig

1. Create file tsconfig.json in root dir

2. Put next configuration in it

    {
      "version": "1.6.0-beta",
      "compilerOptions": {
         "target": "es5",
         "declaration": true,
         "noImplicitAny": false,
         "removeComments": true,
         "noLib": false,
         "emitDecoratorMetadata": true,
         "sourceMap": true,
         "listFiles": true,
         "outDir": "",
         "out": "./Compiled/mycompiled.js", // here specify your output file( it would be contain all your compiled ts file in one) 
         "experimentalDecorators": true
      },
      "files": [ // file list (optional)
        "somefile.ts"
      ]
   }
   

3. Configure VS Code task runner

Using JavaScript Task Runner such as Gulp or Grunt

Current example show how you should modify your gulpfile.js to compile your project using gulp-typescript

gulp.task('build', function () {
    var tsResult = gulp.src('src/**/*.ts') // here specify your file location or folders
                     .pipe(ts({ // gulp-typescript configuration
                               noImplicitAny: true,
                               out: 'output.js'// here specify your output file( it would be contain all your compiled ts file in one) 
                              }));

    return 
        tsResult.js
            .pipe(gulp.dest('./')); // here you can specify your output directory too
});

Problem Solution

For your case you can choose both solutions. Pay attention for code comments and specify out directories and name of compiled js file as you wish.

Good Luck!

Resources

1. Gulp Typescript NPM.
2. Using TypeScript in Visual Studio Code (MSDN Blog).
3. Typescript tsconfig.json specification
4. Using Task Runner in VS Code