共计 1498 个字符，预计需要花费 4 分钟才能阅读完成。
Gulp.js 是一个自动化构建工具, 开发者可以使用它在项目开发过程中自动执行常见任务。最近复习一下 gulp 一些基本的写法，在写了一些简单的 uglify,rename,concat,clean 的处理之后，发现都还记得这些基本语法。
然后无意间就想在 demo 中写下 export function 会变成怎样，结果发现 gulp 并不支持直接的 es6 语法，而且提示的错误也让人模棱两可。
events.js:182
throw er; // Unhandled ‘error’ event
^
GulpUglifyError: unable to minify JavaScript
这着实让我头疼了一会，百度后才明白这是解析 es6 语法错误。于是按照网上说的安装了 gulp-babel, 然后配置一个.babelrc 的文件，再根据报错提示安装了 @babel/core，结果发现编译是不报错了，但是编辑结果后的文件还是出不来。
gulp.task(‘miniJS’, function(){
gulp.src([‘demo.js’, ‘demo2.js’])
.pipe(concat(‘demoFile.js’))
.pipe(babel())
.pipe(gulp.dest(‘./finalFile/’))
})// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
后来索性直接去了 gulp-babel 官网看，才明白 3 个月之前 gulp-babel 进行了更新，而我更新的是最新的 gulp-babel 包, 而我搜索到的解决方法都是很早之前的，自然无法匹配。
官网提示方法：
# Babel 7
$ npm install –save-dev gulp-babel @babel/core @babel/preset-env
// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
# Babel 6
$ npm install –save-dev gulp-babel@7 babel-core babel-preset-env
所以 gulp-babel 版本为 8.0.0 的只要安装如图的包就好了：
“@babel/core”: “^7.1.6”,
“gulp-babel”: “^8.0.0”,
“@babel/preset-env”: “^7.1.6”,
这个 @babel/preset-env 包就算没有安装也并不会报错确实是坑，安装好需要的包后根据官网给的样例：
.pipe(babel({
presets: [‘@babel/env’]
}))
同时需要去除掉创建的.babelrc 文件，好像两者会有冲突，.babelrc 文件存在的同时导致不会输出编译后的文件。这样一来 export 关键字就有用武之地了，但是在 es6 中
function demoFunc(){
//something
}// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
export demoFunc;
这段代码是生效的，但是 babel() 好像认定是个解析不出的代码，不会解析输出文件，不知道是什么问题，我也处于懵逼中。换成如下的方式是可以的：
export function demo(){
console.log(‘this is the first gulp demo’);
}
export var num = {};
这样一来 uglify 就可以对 es6 进行解析了：
.pipe(babel({
presets: [‘@babel/env’]
}))// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
.pipe(uglify())
.pipe(gulp.dest(‘file’))
结语
感谢您的观看，如有不足之处，欢迎批评指正。
