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 pile 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..

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 pile 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..

• javascript
• pilation
• gruntjs
• typescript
• gulp

5 Answers 5

VS Code support two way of typescript pilation:

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

Native pilation using tsconfig

1. Create file tsconfig.json in root dir

2. Put next configuration in it

    {
      "version": "1.6.0-beta",
      "pilerOptions": {
         "target": "es5",
         "declaration": true,
         "noImplicitAny": false,
         "removeComments": true,
         "noLib": false,
         "emitDecoratorMetadata": true,
         "sourceMap": true,
         "listFiles": true,
         "outDir": "",
         "out": "./Compiled/mypiled.js", // here specify your output file( it would be contain all your piled 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 pile 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 piled 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 ments and specify out directories and name of piled 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

I've figured it out. I made a custom Grunt task which is not optimal but does the job.

module.exports = function(grunt) {
    grunt.loadNpmTasks("grunt-typescript");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks('grunt-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');

    grunt.initConfig({
        typescript: {
            base: {
                src: ['./client/**/*.ts'],
                dest: './temp',
                options: {
                    'module': 'monjs',
                    target: 'es5',
                    sourceMap: true
                }
            }
        },
        copy: {
            main: {
                files: [
                    {
                        src: ['./temp/**/*.js', './temp/**/*.js.map'],
                        dest: './build/',
                        flatten: true,
                        expand: true
                    }
                ]
            }
        },
        clean: [
            './temp'
        ],
        watch: {
            scripts: {
                files: ['./client/**/*.ts'],
                tasks: ['typescript', 'copy', 'clean']
            }
        }
  });

  grunt.registerTask("default", ['typescript', 'copy', 'clean', 'watch']);
};

I think you need to give Gulp or another task runner a look. You will need a few steps to achieve what you are looking for.

• Compile Typescript
• Concatenate the files
• Cleanup the extra files

I use a similar system with CoffeeScript and it works well.

Gulp should work. You can use the flatten plugin:

I would use gulp-flatten:

var flatten = require('gulp-flatten');
gulp.task('pile', function() {
  gulp.src('src/**/*.ts')
   .pipe(tsc())                    //pile them
   .pipe(flatten())                //change their relative path to point to one dir
   .pipe(gulp.dest('build'));      //write them in destination
});

I am using rollup with the typescript plug-in to do this type of work.

npm i rollup
npm i @rollup/plugin-typescript

Then follow the documnets in these respective libraries.