一些想法和选择

Question

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

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

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

示例：

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

创建构建不是困难的部分，但是如何制作我的代码以便我可以为每种产品使用不同的API。

示例：

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

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

Answer 1

一些想法和选择

你的问题似乎要解释。可能有太多开放式答案，并将提供许多很好的答案。但是，基于我认为你在做什么，这里有一些选择：

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

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

正是你所问的，所有人共享一个回购（我强烈推荐单独的回购以简化任务），这是一个可以用来移动文件的gulp任务。这很简单。

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

您还可以使用merge-stream对多个src＆amp;执行相同的任务。 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中的可重用数组，只需添加要在每个产品src数组中移动的内容。无论什么都有效。

现在说，我会建议单独的repo并使用可重用的代码作为节点模块，但是你可以使用merge-stream来简化使用相同任务来完成多项任务的过程。我希望这会有所帮助。

Answer 2

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

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

两个不同的WebApps与一个源代码

2 个答案:

一些想法和选择

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