gulp 编译es6 探究

Posted 2020-09-11 jake-前端工程师

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的编译和打包。