带有多个包和源图的gulp-typescript

时间:2017-05-16 17:40:04

标签: typescript gulp gulp-sourcemaps gulp-typescript

我正在开发一个打字稿项目,我需要创建两个不同的JS包,一个用于admin的包和另一个用于其他所有包的包,并为每个包生成源映射。我一直在尝试从gulp-typescript克隆js流,然后过滤掉与bundle相关的文件,然后合并流并编写源映射。但是,在运行任务后,不会创建包。

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"
    },
}

注意:源打字稿文件使用名称空间而不是模块。

1 个答案:

答案 0 :(得分:0)

通过向gulp.src()仅提供每个捆绑包所需的文件,快速而简单的方法是独立编译每个捆绑包。 typescript编译器将通过获取您在gulp.src()上未提供的所有必需依赖项来完成剩下的工作。

该方法可能会导致每个捆绑包上出现重复的代码。如果这对您来说是一个问题,我的方法是创建两个不同的项目(一个用于管理员,另一个用于其他所有项目)。您可能在两个包之间共享代码,因此,如果是这种情况,我将创建第三个项目以获得此共享代码。

每个项目都可以拥有自己的捆绑包和各自的源图。您可以将每个项目视为不同的npm包。

希望这对你有帮助, 最好的祝福, jpsfs