Use ES6 functions defined in a separate file with gulp and babel
<p>I've been stuck on trying to split my code into several files then compile with babel and combine into one file for a while now. </p>

<p>I have two files, functions.js and main.js</p>

<p>functions.js looks like:</p>

<pre><code>//distance between two points
const distance = (p1, p2) =&gt; Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));

//slope of line through p1, p2
const slope = (p1, p2) =&gt; (p2.x - p1.x) / (p2.y - p1.y);

//etc.
</code></pre>

<p>Then the code in main.js needs to use these functions. 
My gulpfile looks like:</p>

<pre><code>'use strict';

var projectname = 'canvas-test',
  template_path = '',
  scss_path = template_path + 'scss/**/*.scss',
  es2015_path = template_path + 'es2015/**/*.js',
  scripts_path = template_path + 'scripts/',
  gulp = require('gulp'),
  watch = require('gulp-watch'),
  babel = require('gulp-babel'),
  livereload = require('gulp-livereload'),
  concat = require('gulp-concat');

//Put all javascript tasks here
gulp.task('js', function() {
  return gulp.src(es2015_path + '/**/*.js')
    .pipe(concat('main.js'))
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest(scripts_path))
    .pipe(livereload());
});

//default task
gulp.task('default', ['js'], function() {
  livereload.listen();
  gulp.watch(es2015_path, ['js']);
});
</code></pre>

<p>The file ./scripts/main.js is compiled, concated and created succesfully, however I can't use the functions as they are wrapped in a messy closure added by babel:</p>

<pre><code>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&amp;&amp;require;if(!u&amp;&amp;a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&amp;&amp;require;for(var o=0;o&lt;r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

///COMPILED CODE FROM FUNCTIONS.JS HERE


},{}],2:[function(require,module,exports){
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

//COMPILED CODE FROM MAIN.JS HERE


},{"./functions.js":1}]},{},[2]);
</code></pre>

<p>I've spent quite a while looking for a solution to this, tried using bBrowserify and a few other things but to no avail. Is there any simple way to do this?</p>