带有多个包和源映射的gulp-typescript

Question

I'm working on a typescript project where I need to create two different JS bundles, one bundle for admin and another bundle for everything else and generate source maps for each bundle. I've been trying to clone the js stream from gulp-typescript then filter out the files that are relevant to a bundle and then merge the streams and write the source maps. However after running the task the bundles are not created.

gulpfile.js

var config = {
    src: {
        ts:['./Content/Scripts/TypeScript/**/*.ts']
    },
    bundles: {
        dashboard: [
             '**/Controller/Widgets/**/*.js',
             '**/Services/Widgets/**/*.js'
        ],
        core: [
             '**/Common/**/*.js',
             '**/Server/**/*.js',
             '**/Controller/Search/**/*.js'
        ]
    }
}
gulp.task('build-ts', function () {
    var tsResult = gulp.src(config.src.ts)
        .pipe(srcMap.init())
        .pipe(tsProj());

    var bundleStreams = [
        tsResult.js
            .pipe(clone())
            .pipe(filter(config.bundles.core))
            .pipe(concat(config.outFiles.bundles.core)),
        tsResult.js
            .pipe(clone())
            .pipe(filter(config.bundles.dashboard))
            .pipe(concat(config.outFiles.bundles.dashboard))
    ];
    return merge([            
        merge(bundleStreams)           
            .pipe(srcMap.write())
            .pipe(gulp.dest(config.dist.main)),       
        tsResult.dts
            .pipe(concat(config.outFiles.typeDef))
            .pipe(gulp.dest(config.dist.main))       
    ]);
}); 

package.json

{ 
    "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-clone": "^1.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-filter": "^5.0.0",
        "gulp-sourcemaps": "^2.4.1",
        "gulp-typescript": "^3.1.4",
        "merge2": "^1.0.3",
        "typescript": "2.2.1"
    },
}

Note: the source typescript files are using namespaces not modules.

Answer 1

A quick and dirt approach on this would be to compile each of the bundles independently, by providing to the gulp.src() only the files needed for each bundle. The typescript compiler will do the rest by fetching all needed dependencies that you did not provided on gulp.src() .

The approach may lead to duplicated code on each of the bundles. If that is an issue for you, my approach would be to create two distinct projects (one for admin and another for the everything else). You probably may have shared code between the two bundles so, if that is the case, I would create a third project to have this shared code.

Each project can have it's own bundle and respective sourcemaps. You can think of each project as a different npm package.

Hope that this helps you, Best regards, jpsfs