希望有人能帮我解决这个问题。
我有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有完全不同的字段。
你们有什么建议/技巧/指南，让我可以完成类似的任务，减少我的代码重用吗?
一些想法和选择
你的问题似乎有待解释。可能会有太多开放式的答案，并且会提供许多很棒的答案。然而，基于我认为你正在做的事情，这里有一些选项:- 使用外部配置文件，并为每个配置文件使用globing模式，并排除你不想要的。
- 创建一个gulp任务，复制一些源文件并将它们移动到你的dist/a, dist/b等把你的可重用代码变成node_module，并在每个应用的src中'require'它。
- 将可重用代码转换为git子模块，并将其作为每个应用的依赖项。
移动文件和文件夹的Gulp任务
正如你所问的，所有共享一个仓库(我强烈建议单独的仓库，但简化任务)，这里有一个gulp任务，你可以使用它来移动文件。这很简单。
为方便起见，本例/建议分为两部分。任务，以及管理它的配置部分。你既可以在gulpfile中使用它，也可以作为一个外部文件，如果你在三个项目中使用同一个gulpfile，它可能更容易管理。
你也可以使用merge-stream对多个src &桌子:
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中合理的数组，只在每个products src数组中添加你想要移动的东西。无论工作。
话虽如此，我建议单独的repo，并使用可重用的代码作为节点模块，但您可以使用merge-stream来简化使用相同任务做多个事情的过程。
假设我理解了您的问题，您想要的是根据产品类型进行修改的基本服务。如果是这样的话，你可以使用angular的service装饰器，它可以让你通过定义新方法或包装现有方法的行为，为现有的服务添加功能。如果这适合您，请让每个产品根据其需要装饰基础服务。
有很多装饰的例子，比如这个