Implement a separation between JS needed for Bedrock and JS needed for the prototype output

Author: Wolfr

content/js/index.js

@@ -1 +1,4 @@
-import '../../core/js/index';
+// Client JS
+// This file just to test output, you can put your own scripts here. Scripts loaded here will be transpiled using Babel to bundle-client.js
+
+import data from './modules/data.js';

content/js/modules/data.js

@@ -0,0 +1,3 @@
+export default  [
+  { name: 'John Doe' }
+]

content/templates/_layouts/master.pug

@@ -45,7 +45,8 @@ html(dir="ltr" lang="en" class=htmlClass ? htmlClass : '')
 
 
         = "\n"
-        script(src='/js/bundle.js')
+        script(src='/js/bundle-prototype.js')
+        script(src='/js/bundle-client.js')
 
         block footerScripts
             // Nothing yet

core/paths.js

@@ -54,6 +54,10 @@ module.exports = {
   },
   core: {
     path: corePath,
+    js: {
+      entryFile: path.join(corePath, 'js/index.js'),
+      allFiles: path.join(corePath, 'js/**/*.js')
+    },
     scss: {
       all: path.join(corePath, 'scss/**/*.scss'),
       prototype: path.join(corePath, 'scss/prototype.scss')

core/tasks/bundle.js

@@ -5,14 +5,23 @@ const babelify = require('babelify');
 
 const paths = require('../paths');
 
-module.exports = function () {
-  return gulp.src(paths.content.js.entryFile)
-    .pipe(bro({
-      debug: true,
-      transform: [
-        babelify.configure({ presets: ['@babel/preset-env'] }),
-      ]
-    }))
-    .pipe(rename('bundle.js'))
-    .pipe(gulp.dest(paths.compiled.js))
+let babelConfig = {
+  transform: [
+    babelify.configure({ presets: ['@babel/preset-env'] }),
+  ]
+}
+
+module.exports = {
+  clientBundle() {
+    return gulp.src(paths.content.js.entryFile)
+      .pipe(bro(babelConfig))
+      .pipe(rename('bundle-client.js'))
+      .pipe(gulp.dest(paths.compiled.js))
+  },
+  prototypeBundle() {
+    return gulp.src(paths.core.js.entryFile)
+      .pipe(bro(babelConfig))
+      .pipe(rename('bundle-prototype.js'))
+      .pipe(gulp.dest(paths.compiled.js))
+  }
 };

core/tasks/watch.js

@@ -12,5 +12,7 @@ module.exports = function () {
   gulp.watch(paths.content.assets.resources, gulp.series('copy:resources'));
   gulp.watch(paths.content.iconFont.sourceFiles, gulp.series('icon-font'));
   gulp.watch(paths.content.icons.sourceFiles, browserSync.reload());
-  gulp.watch(paths.content.js.allFiles, gulp.series('bundle'));
+  gulp.watch(paths.content.js.allFiles, gulp.series('bundle:clientBundle'));
+  gulp.watch(paths.core.js.allFiles, gulp.series('bundle:prototypeBundle'));
+
 };

gulpfile.js

@@ -22,7 +22,8 @@ gulp.task('copy:favicon', copy.favicon);
 gulp.task('copy:resources', copy.resources);
 gulp.task('copy:scripts', copy.scripts);
 gulp.task('copy:compiledToDist', copy.compiledToDist);
-gulp.task('bundle', bundle);
+gulp.task('bundle:clientBundle', bundle.clientBundle);
+gulp.task('bundle:prototypeBundle', bundle.prototypeBundle);
 gulp.task('icon-font', iconFont);
 
 gulp.task('templates:compile:content', templates.compile.content);
@@ -36,7 +37,7 @@ gulp.task('templates:compile', config.styleguide ?
 
 gulp.task('watch', watch);
 gulp.task('copy', gulp.parallel('copy:images', 'copy:fonts', 'copy:resources', 'copy:scripts', 'copy:favicon'));
-gulp.task('compile-all', gulp.parallel('templates:clean','icon-font', 'bundle', 'sass', 'copy'));
+gulp.task('compile-all', gulp.parallel('templates:clean','icon-font', 'bundle:clientBundle', 'bundle:prototypeBundle', 'sass', 'copy'));
 
 gulp.task('build', gulp.series('compile-all', 'templates:compile', 'copy:compiledToDist'), function (done) {
   console.log('------------\n');