4

Hope someone can help me figure out this.

I have 3 products that have almost the same interface, lets say Product A, B and C

What I want to do, if possible(through Gulp/Grunt/Other), is to create one source code and when building the final app, it will carry over to the dist folder the part for Produtc A, B C.

Example:

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

Creating the build isn't the hard part, but how can I make my code so I can consume consume different API for each product.

Example:

Product A, B and C have status pages, A have (3 fields), B have all field from A (plus one) and C have fields completely different.

Do you guys have tips/tricks/guides so I can accomplish a similar task and reduce my code re-use?

2
  • You can conditionally merge with gulp-if or similars Commented Jun 3, 2015 at 12:55
  • Can you expand your question with done code that demonstrates the scenario? Commented Oct 3, 2015 at 17:47

2 Answers 2

4
+50

Some Thoughts and Options

Your question seems to leave it to interpretation. Too many open ended answers possible, and many great answers will be provided. However, based on what I think you are doing, here are some options:

  • Use an external config file, and use globbing patterns for each, and exclude what you don't want.
  • Create a gulp task that copies some source files and moves them to your dist/a, dist/b, etc.
  • Turn your reusable code into a node_module and 'require' it in each apps src.
  • Turn your reusable code into a git submodule and use it as a dependency for each app. Works well with the previous point.

A Gulp Task to move files and folders

For exactly what you asked, all sharing one repo (I do highly recommend separate repos though to simplify the tasks), here is a gulp task you can use to move files around. It's very simple.

This example / suggestion will have two parts for convenience. The task, and a config section to manage it. You can either use it in the gulpfile, or as an external file which may be easier to manage if you are using the same gulpfile for three projects.

You could also use merge-stream to do the same task to multiple 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' ] );

You could also skip the reasuable array in config in this example, and just add what you want to move in each products src array. Whatever works.

Now that being said, I would suggest separate repo's and using that reusable code as node modules, but you can use merge-stream to simplify the process of using the same tasks to do multiple things. I hope this helps.

Sign up to request clarification or add additional context in comments.

1 Comment

I made an error in the example above, I copied and pasted and forgot to change the variable names. Fixed it now
-1

Assuming I understand your question, what you want is a basic service that has modifications by the product type. If it is the case, you can use angular's service decorator, this enables you to take an existing service and add to it functionality, either by defining new methods or wrapping the behavior of existing methods. If this works for you, have each product decorate the base service according to its needs.

There are many examples of decorations, for example this one.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.