title: Correct way to use es6 modularity with gulp + babelify + browserify?
body: <p>I have to use es6 modularity for my next project, the tools used for building the es6 modularity have been finalised to be gulp,babelify &amp; browserify, I am confused because I am new to all three,&amp; how they work to create es6 modularity. relevant part of my gulp file is</p>
  
  <pre><code>function bundle_js(bundler) {
  return bundler.bundle()
      .on('error', map_error)
      .pipe(source('app.js'))
      .pipe(buffer())
      .pipe(gulp.dest('dist/'))
      .pipe(rename('app.min.js'))
      .pipe(sourcemaps.init({ loadMaps: true }))
      // capture sourcemaps from transforms
      .pipe(uglify())
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('dist/'))
    }
  
  // Without watchify
  gulp.task('browserify', function () {
      var bundler = browserify('app.js', { debug: true }).transform(babelify, {/* options */ })
  
      return bundle_js(bundler)
  })
  </code></pre>
  
  <p>I want to ask </p>
  
  <ol>
  <li><p>which file should i reference in index.html, app.js or dist/app.min.js</p></li>
  <li><p>there are other js files also in es6 with module export function in js/*js 
  folder, does babelify/browserify uses only entry js file (app.js) or all the src files (js/*js ) for  modularity? </p></li>
  </ol>