写GULP遇到的ES6问题详解

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'))
复制代码

结语

感谢您的观看，若有不足之处，欢迎批评指正。