首页 > 代码库 > gulp 编译es6 探究

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

 

gulp 编译es6 探究