title: Gulp + browserify + 6to5 + source maps
body: <p>I'm trying to write a gulp task allowing me to use modules in JS (CommonJS is fine), using browserify + 6to5. I also want source mapping to work.</p>
  
  <p>So:
   1. I write modules using ES6 syntax. 
   2. 6to5 transpiles these modules into CommonJS (or other) syntax. 
   3. Browserify bundles the modules.
   4. Source maps refers back to the original ES6 files.</p>
  
  <p>How to write such a task?</p>
  
  <p>Edit: Here's what I have so far:</p>
  
  <p><strong>gulp task</strong></p>
  
  <pre><code>gulp.task('browserify', function() {
      var source = require('vinyl-source-stream');
      var browserify = require('browserify');
      var to5ify = require('6to5ify');
  
      browserify({
          debug: true
      })
      .transform(to5ify)
      .require('./app/webroot/js/modules/main.js', {
          entry: true
      })
      .bundle()
      .on('error', function(err) {
          console.log('Error: ' + err.message);
      })
      .pipe(source('bundle.js'))
      .pipe(gulp.dest(destJs));
  });
  </code></pre>
  
  <p><strong>modules/A.js</strong></p>
  
  <pre><code>function foo() {
      console.log('Hello World');
  
      let x = 10;
  
      console.log('x is', x);
  }
  
  export {
      foo
  };
  </code></pre>
  
  <p><strong>modules/B.js</strong></p>
  
  <pre><code>import {
      foo
  }
  from './A';
  
  function bar() {
      foo();
  }
  
  export {
      bar
  };
  </code></pre>
  
  <p><strong>modules/main.js</strong></p>
  
  <pre><code>import {
      bar
  }
  from './B';
  
  bar();
  </code></pre>
  
  <p>The code seems to be working, but it's not minified and the source map is inline (which is not really working for production).</p>