两个不同的 Web 应用程序和一个源代码

Question

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

我有 3 个产品，界面几乎相同，假设产品 A、B 和 C

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

示例：

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

创建构建并不是困难的部分，但我如何编写代码才能为每个产品消耗不同的 API。

示例：

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

你们有 tips/tricks/guides 这样我可以完成类似的任务并减少我的代码重用吗？

Answer 1

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

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

Answer 2

一些想法和选择

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

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

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

完全按照您的要求，所有共享一个存储库（我强烈建议使用单独的存储库以简化任务），这是一个 gulp 任务，您可以使用它来移动文件。这很简单。

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

您也可以使用 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数组中添加你要移动的内容即可。什么都行。

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

两个不同的 Web 应用程序和一个源代码

Two Different WebApps with one Source Code

javascript

web

gruntjs

gulp

frontend

一些想法和选择

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