Javascript Typescript：编译文件而不镜像目录层次结构

我正在使用VS代码制作一个带有TypeScript（JS）的HTML5游戏。项目越来越大，我想将输出存储在不同的目录中。 问题是，每当我编译所有内容时，它都会镜像原始目录层次结构。例如：

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

产出：

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

（同上）

我想：

-dir1
*.js 

---

我试过Grunt/Gulp/VSCode自己的TaskRunner，但没有任何效果，“keepDirectoryHierarchy”似乎已经过时了。

我想你需要给Gulp或其他TaskRunner看看。你将需要一些步骤来实现你想要的

• 编译类型脚本
• 连接文件
• 清理额外的文件

---

我在CoffeeScript上使用了一个类似的系统，它工作得很好。

Gulp应该可以工作。您可以使用：

我会用大口压扁：

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
});

---

我已经弄明白了。我做了一个定制的

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

VS代码支持两种类型脚本编译方式：

使用tsconfig进行本机编译

使用JavaScript任务运行程序，例如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代码任务运行程序

使用JavaScript任务运行程序，例如Gulp或Grunt 当前示例显示了如何修改gulpfile.js以使用

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

祝你好运

资源

---

我已经把你的答案从问题转移到了你的答案。请不要在问题中发布解决方案。我尝试了

gulp flatte

来展平TypeScript编译的输出，但最终得到了一个混乱的源地图。这个问题不是很明显，因为sourcemap是创建的，但当我尝试实际使用它时，它不起作用。当我仔细观察时，问题的症状之一是tsc生成的sourcemap包含一个

sourcesContent

字段，但经过展平后，它就消失了。

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
});