【问题标题】：Two Different WebApps with one Source Code两个不同的 WebApp 和一个源代码
【发布时间】：2015-06-03 12:50:05
【问题描述】：

希望有人能帮我解决这个问题。

我有 3 个界面几乎相同的产品，比如说产品 A、B 和 C

如果可能的话（通过 Gulp/Grunt/Other），我想要做的是创建一个源代码，并在构建最终应用程序时，它会将产品 A、B 的部分转移到 dist 文件夹C.

例子：

app/ js/ assets/ views/ dist/ ProdA/ ProdB/ ProdC/

创建构建并不是困难的部分，但我怎样才能编写代码，以便我可以为每个产品使用不同的 API。

例子：

产品 A、B 和 C 有状态页面，A 有（3 个字段），B 有 A 的所有字段（加一个），C 有完全不同的字段。

你们有提示/技巧/指南以便我可以完成类似的任务并减少我的代码重用吗？

【问题讨论】：

你可以有条件地与 gulp-if 或类似的合并
你能用演示场景的完成代码扩展你的问题吗？

标签： javascript web gruntjs gulp frontend

【解决方案1】：

一些想法和选择

您的问题似乎有待解释。可能有太多的开放式答案，并且将提供许多很棒的答案。但是，根据我认为您正在做的事情，这里有一些选择：

使用外部配置文件，并为每个配置文件使用通配模式，并排除您不想要的内容。
创建一个 gulp 任务，复制一些源文件并将它们移动到您的 dist/a、dist/b 等。
将您的可重用代码转换为 node_module 并在每个应用程序 src 中“要求”它。
将您的可重用代码转换为 git 子模块，并将其用作每个应用程序的依赖项。与前一点配合得很好。

移动文件和文件夹的 Gulp 任务

正如您所要求的，所有共享一个存储库（我强烈建议单独存储库以简化任务），这是一个可用于移动文件的 gulp 任务。这很简单。

为方便起见，此示例/建议将分为两部分。任务，以及管理它的配置部分。您可以在 gulpfile 中使用它，也可以将其用作外部文件，如果您对三个项目使用相同的 gulpfile，这可能更容易管理。

你也可以使用 merge-stream 对多个 src & dest 执行相同的任务：

npm install --save-dev merge-stream

gulpfile.js

// =========================================================
// Projects: Project A, Project B, Project C
// info: 
// 
// =========================================================
// ------------------------------------------------ Requires
var gulp = require('gulp'),
    merge = require('merge-stream');

// -------------------------------------------------- Config
var config = {
    // These are some examples
    reusable: [
        './src/reusableCode/scripts/**/*.js',
        './src/reusableCode/styles/**/*.css
    ],
    productA: {
        src: [  ],  // Add product A src
        opts: {  }, // Add product A options for gulp tasks,
        dest: './dist/A'
    },
    productB: {
        src: [  ],  // Add product B src
        opts: {  }, // Add product B options for gulp tasks,
        dest: './dist/B' 
    },
    productC: {
        src: [  ],  // Add product C src
        opts: {  }, // Add product C options for gulp tasks,
        dest: './dist/C'
    },
}

// --------------------------------------------------- Tasks
// ...

gulp.task('moveSrc', function(){

    var prodA = gulp.src( config.reusable )
        .pipe( gulp.dest( './dist/A' ) );

    var prodB = gulp.src( config.reusable )
        .pipe( gulp.dest( './dist/B' ) );

    var prodC = gulp.src( config.reusable )
        .pipe( gulp.dest( './dist/C' ) );

    return merge( prodA, prodB, prodC);
});


// A task to move folders and files without `merge-stream`
// gulp.task( 'moveSingleStream', function() {

    // gulp.src takes the src into a stream, and output the stream
    // just by using gulp.dest . This moves files and folders around
    gulp.src( config.reusable )
        .pipe( './dist' );
});

// --------------------------------------------------- Build
gulp.task( 'build', [ 'moveSrc', 'otherTask1', 'otherTask2' ] );

你也可以在这个例子中跳过 config 中的 reasuable 数组，只在每个 products src 数组中添加你想要移动的内容。什么都行。

话虽如此，我建议单独的 repo 并将该可重用代码用作节点模块，但您可以使用 merge-stream 来简化使用相同任务执行多项操作的过程。我希望这会有所帮助。

【讨论】：

我在上面的例子中犯了一个错误，我复制并粘贴并忘记更改变量名称。现在修复它

【解决方案2】：

假设我理解您的问题，您需要的是根据产品类型进行修改的基本服务。如果是这种情况，您可以使用 Angular 的服务装饰器，这使您可以通过定义新方法或包装现有方法的行为来获取现有服务并向其添加功能。如果这对您有用，请让每个产品根据其需要装饰基础服务。

装饰的例子很多，比如this one。

【讨论】：