我的需求是:
将分模块的es6转化为es5;(使用gulp-babel与babel-preset-es2015-node5)
将转化后的es5合并成一个js文件;(使用gulp-browserify)
将合并的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
,文件就出来了