码迷,mamicode.com
首页 > 其他好文 > 详细

gulp 编译es6 探究

时间:2017-04-15 17:58:54      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:工具   efault   src   str   for   pipe   highlight   browser   bundle   

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 探究

标签:工具   efault   src   str   for   pipe   highlight   browser   bundle   

原文地址:http://www.cnblogs.com/jocongmin/p/6714992.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!