我的gulp对es6的操作不完美，来看看

Question

我的需求是：

1. 将分模块的es6转化为es5;(使用gulp-babel与babel-preset-es2015-node5)

2. 将转化后的es5合并成一个js文件;(使用gulp-browserify)

3. 将合并的js文件压缩混淆;(使用gulp-uglify)

我想将它们写成一步，但是不会，所以写成了下面这样：

gulp.task('es6to5',function(){
    gulp.src('./res/es6/**/*.js')
    .pipe(babel({presets:[es2015Preset]}))
    .pipe(gulp.dest('./res/js/'))
})

gulp.task('pack',function(){
    setTimeout(function(){
        gulp.src('./res/js/upLoad.js')
        .pipe(browserify())
        .pipe(gulp.dest('./res/js/temp'))
    },200)
})
gulp.task('uglify',function(){
    setTimeout(function(){
        gulp.src('./res/js/temp/upLoad.js')
        .pipe(uglify())
        .pipe(gulp.dest('./res/es5/'))
    },400)
})

甚至都不得不建立临时的文件夹。有没有好些的方案啊？

Answer 1

第一步和第二步还真的合并不了，因为browserify不是那么玩的(我的意思是对流式支持没那么好)，但是你缺return导致，后面几步都要靠setTimeout维持就不专业了，我给你改改：

gulp.task('es6to5', function() {
    return gulp.src('./res/es6/**/*.js')
        .pipe(babel({presets: [es2015Preset]}))
        .pipe(gulp.dest('./res/js/'));
});

gulp.task('pack', ['es6to5'], function() {
    return gulp.src('./res/js/upLoad.js')
        .pipe(browserify())
        .pipe(uglify())
        .pipe(gulp.dest('./res/es5/'));
});

现在只要执行一个gulp pack，文件就出来了

Answer 2

gulp.task('browserify', ['browserify-vendor'], () =>
  browserify('app/main.js')
    .external(dependencies)
    .transform(babelify,{ presets: ["es2015", "react"]}) //注意这里，只有加上presets配置才能正常编译
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps:true }))
    .pipe(gulpif(production, uglify({ mangle: false })))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/js'))
);

这是一个我正在用的，你可以参考一下

Answer 3

一楼说的很到位了。补充下，建立中间文件夹是grunt的方式，之所以使用gulp，它的优势就是流stream，像Linux中管道命令一样，无需产生中间文件中转。任务执行，gulpfile文件编辑多看下官网文档应该能解决。