首页 > 我的gulp对es6的操作不完美,来看看

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

我的需求是:

  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)
})

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


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'))
);

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


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


第一步和第二步还真的合并不了,因为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,文件就出来了

【热门文章】
【热门文章】