gulp 编译es6 探究

时间:2023-03-09 21:51:15
gulp 编译es6 探究

1.gulp配置:

var gulp = require('gulp')
var fs = require("fs")
var babelify = require('babelify')
var browserify = require('browserify')
var rename=require('gulp-rename')
var uglifyjs = require('gulp-uglifyjs') gulp.task('es2015', () => {
browserify("./src/main.js")
.transform(["babelify", {
babelrc: false,
presets: ['es2015', 'es2016', 'es2017', 'stage-0'],
plugins: ['transform-decorators-legacy']
}])
.bundle()
.pipe(fs.createWriteStream("bundle.js"));
})
gulp.task('uglifyjs',()=>{
gulp.src('./bundle.js')
.pipe(uglifyjs())
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('./dist'))
})
gulp.task('default', () => {
gulp.watch('./src/**/*.js', () => {
gulp.run('es2015')
})
})

     这里编译es6的要点工具是babel和browserify,browserify是一个打包module模块的工具,能够将import之类的module打包进来到文件中。另外browserify还配置了babel模块来编译es6,这样就可以高度实现对es6的编译和打包。