Building js-file from es6 modules using gulp

I did not find an article where the process of assembling a javaScript file from ES6 modules using gulp is explained quite simply. The task of this question is through joint efforts to ask the question (that is, me) and those who answer to eliminate this gap. I have simplified the project to a minimum, but in such a way as to demonstrate the possibility of data exchange between modules.

Project structure

📁 es2015 folder with source js-files of the ES6 standard ( ES2015 ).

📄 common.js All variables and functions in this file should be available in all modules. In practice, it makes sense to put some general-purpose functions, constants containing CSS class names and IDs, etc. into such a file.

📄 module_one.js Works with variables and functions from common.js , as well as its own (local) variables and functions, any of which can be exported to other modules at the developer’s discretion.

📄 module_two.js Uses functions and variables from common.js , as well as some functions and variables from module_one.js .

📁 js folder with ES5 intermediate js-files converted by gulp-babel . The file names match the files in the / es2015 folder.

📄 index.html - file with minimal markup (just to have something to open in the browser)

📄 bundle.js is the compiled gulp production file from the files in the / js folder.

📄 gulpfile.js

📄 package.json

Content of key files

common.js

export const COMMON_CONST = 'Эта константа должна быть доступна во всех модулях.'; export function commonFunction(){ console.log('commonFunction() отработала успешно. Такой же результат должен быть при вызове из любого модуля'); } 

module_one.js

 import * from "./common"; console.log(COMMON_CONST); commonFunction(); var moduleAlocalVar = 'Эта переменная доступна только в этом модуле. А-ля "private"'. export var moduleAexportableVar = 'Эту переменную планируется использовать в других модулях. А-ля public'; var moduleAlocalFunc(){ console.log('Эта функция доступна только в этом модуле. А-ля "private"'); } export moduleAexportableFunc(){ console.log('Эту функцию планируется использовать в других модулях. А-ля "public"'); } 

module_two.js

 import * from "./common"; import {moduleAexportableVar , moduleAexportableFunc} from "./module_one.js"; console.log(COMMON_CONST); console.log(moduleAexportableVar); commonFunction(); moduleAexportableFunc(); 

gulpfile.js

 var gulp = require('gulp'); var babel = require('gulp-babel'); var concat = require('gulp-concat'); var uglifyjs = require('gulp-uglifyjs'); // сначала конвертируем в ES5 gulp.task('babel', function() { return gulp.src('app/es2015/*.js') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('js')); // по окончании таска ещё бы вызвать сборку buildjs... }); gulp.task('buildjs', function() { return gulp.src('app/js/*.js') // соберём модули в один файл. Но как? Понятно, что одной конкатенации не достаточно. .pipe(uglifyjs()) // минифицируем выходной файл .pipe(gulp.dest('app/js')); }) 

Question

How should I fix gulpfile.js to convert files into ES5 (folder with / js ) and run them in bundle.js when launched into one task?