【问题标题】：Typescript: Compile files without mirroring the directory hierarchy打字稿：编译文件而不镜像目录层次结构
【发布时间】：2015-09-19 16:24:42
【问题描述】：

我正在使用 VS Code 使用 TypeScript (JS) 制作 HTML5 游戏。该项目变得越来越大，我想将输出存储在不同的目录中。问题是，每当我编译所有内容时，它都会反映原始目录层次结构。比如：

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

输出：

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

（相同）

我想要：

-dir1
*.js

我已经尝试过 Grunt/Gulp/VSCode 自己的 TaskRunner，但没有任何效果，而且“keepDirectoryHierarchy”似乎被贬低了..

【问题讨论】：

标签： javascript compilation gruntjs typescript gulp

【解决方案1】：

我认为您需要看看 Gulp 或其他任务运行器。您将需要几个步骤来实现您正在寻找的东西。

编译打字稿
连接文件
清理多余的文件

我在 CoffeeScript 中使用了类似的系统，它运行良好。

【讨论】：

【解决方案2】：

Gulp 应该可以工作。你可以使用the flatten plugin:

我会使用 gulp-flatten：

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

【讨论】：

我尝试gulp-flatten 来扁平化 TypeScript 编译的输出，但我最终得到了一个混乱的源映射。问题不是立即很明显，因为源映射是创建的，但是当我尝试实际使用它时，它不起作用。仔细一看，问题的症状之一是 tsc 生成的 sourcemap 包含了一个sourcesContent 字段，但是扁平化之后就没了。

【解决方案3】：

VS Code 支持两种 typescript 编译方式：

使用 tsconfig 进行本机编译
使用 JavaScript Task Runner，例如 Gulp 或 Grunt

使用 tsconfig 进行本机编译

在根目录中创建文件 tsconfig.json

将下一个配置放入其中

 {
   "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"
   ]
}

配置 VS Code 任务运行器

使用 JavaScript Task Runner，例如 Gulp 或 Grunt

当前示例显示您应该如何修改 gulpfile.js 以使用 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
});

问题解决方案

对于您的情况，您可以选择两种解决方案。注意代码cmets，并根据需要指定编译js文件的目录和名称。

祝你好运！

资源

【讨论】：

【解决方案4】：

我想通了。我做了一个自定义的Grunt 任务，虽然不是最佳的，但可以完成这项工作。

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': 'commonjs',
                    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']);
};

【讨论】：

我已将您的解决方案从问题移至您的答案。请不要在问题中发布解决方案。