Transpile Model View Controller in Javascript

Question

I want to use Gulp, Rollup and Babel to transpile ES6 app to ES5 (that use the module reveal pattern with IIFE).

The gulp file:

var gulp = require('gulp');
var rollup = require('gulp-better-rollup');
var babel = require('rollup-plugin-babel');

gulp.task('roll', function () {
    return gulp.src('_01_src/js/form/*.js')
        .pipe(rollup(
            {plugins: [babel({presets: ['es2015-rollup']})]},
            {format: 'iife',}
            )
        )
        .pipe(gulp.dest('_02_build/js/form/'));
});

The controller import model and view and is transpiled ok:

var controller = (function (model) {
'use strict';

model = 'default' in model ? model['default'] : model;

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var Cat = function Cat(name) {
    classCallCheck(this, Cat);

    this.name = name;
};

return Cat;

}(model));

The problem that I have is when I want to group together (to avoid collision) like this is not working:

( function() { var model = function () { ... }()
var view = function () { ... }()
var controller = function (model, view) {   
    ......
}(model, view) )}()

I have multiple app that contains MVC and I want first to group and app together than group all app;

So I start:

js
app1
 - model.js
 - view.js
 - controller.js
app2
 - model.js
 - view.js
 - controller.js
app3
 - model.js
 - view.js
 - controller.js

After task run I want to have, which don't collide:

  js
   app1.js
   app2.js
   app3.js

Answer 1

I have partial working example from the rollup-stream in github team/users, but only works for an app(and not exactly transpiled as MVC), not with multiple apps.

const gulp = require('gulp');
const scss = require('gulp-sass');
const babel = require('gulp-babel');
const watch = require('gulp-watch');
const autopre = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const rollup = require('rollup-stream');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

gulp.task('rollup', function () {
    return rollup({
        entry: '_01_src/js/form/app.js',
        format: 'iife',
    })
    // turn the raw text stream into a stream containing one streaming Vinyl file.
    .pipe(source('form.js'))
    // buffer that file's contents. most gulp plugins don't support streaming files.
    .pipe(buffer())
    // transform the files.
    .pipe(babel({
        presets: ['es2015']
    }))
    // and output to _02_build/js/form.js as normal.
    .pipe(gulp.dest('_02_build/js'));
});