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

Question

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

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

如果可能的话(通过 Gulp/Grunt/Other)，我想做的是创建一个源代码，在构建最终应用程序时，它将把部分内容转移到 dist 文件夹中对于产品 A、B C。

例子:


应用程序/
js/
Assets /
意见/
分布/
产品A/
产品B/
产品C/


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

例子:

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

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

Answer 1

一些想法和选择

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

• 使用外部配置文件，并为每个配置文件使用通配模式，并排除不需要的内容。
• 创建一个复制一些源文件并将它们移动到您的 dist/a、dist/b 等的 gulp 任务。
• 将您的可重用代码转换为 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' ] );

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

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