如何用gulp编译es6语法？

Question

我的最初想法是，用gulp做自动化工具，写es6语法，通过gulp-babel将es6编译为es5并混淆压缩，然后通过sourcemap进行调试，但是现在遇到的问题是gulp-babel编译import或者generator函数时生成的require函数识别不了。在网上的找到的技术方案是，通过webpack-stream对es6进行打包编译，但是一直没有尝试成功。
通过gulp，gulp-babel，webpack-stream配合编译es6的方案行不行？我现在特别晕，我都搞不清楚，用gulp编译es6，是通过gulp，gulp-babel，webpack-stream三者配合使用，还是gulp，webpack-stream配合使用呢？

我的最终期望是：
用gulp编译es6（支持import和generator等模块，而不是阉割版），生成被混淆压缩的单个js文件，通过sourcemap调试代码。求大神支招。最好能写下gulpfile.js的配置文件。

贴下我正在尝试的配置文件：

gulp.task('babel',function () {
    /*return gulp.src(['src/es6/!**!/base.js','src/es6/!**!/index.js'])
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['@babel/env'],
            plugins: ['@babel/transform-runtime']
        }))
        .pipe(concat('index.min.js'))
        .pipe(webpack())
        .pipe(uglify())
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('dist/js/'));
    console.log('babel编译',new Date().getTime());*/
    return gulp.src('src/es6/**/index.js')
        .pipe(webpack())
        .pipe(gulp.dest('dist/'));
});

Answer 1

链接

这是我之前写的一个文档，可以参考下。