gulp：es6转es5的插件——gulp-babel

gulp-babel这是Babel的Gulp插件。

一、安装

1、首先要安装gulp-babel、babel-core、babel-preset-es2015这三个插件

下面这种安装方法，安装的不是最新的插件，往下读，会明白原因，以及如何安装最新的。

npm install gulp-babel@7 --save-dev

npm install babel-core --save-dev

npm install babel-preset-es2015 --save-dev 

2、gulp-babel要指定版本号

npm上查看：gulp-babel的使用和版本号，文档会介绍不同的版本依赖安装

7.0的gulp-bable依赖6.0的babel-core；

8.0的gulp-babel依赖7.0的@babel/core；

因为npm上gulp-babel的最新版本为8.0.0，不指定版本号，默认会安装最新版的。

 

3、babel-core和@babel/core的区别

babel-core在7.0 之后，包名升级为 @babel/core，所以在我们没有指定版本号的时候下

安装babel-core的实际上是安装的最后版本的babel-core，版本为6.26.3

安装的 @babel/core实际上是最新版本的，版本号为7.9.6

npm上查看：最新版的@babel/core

npm上查看：最新版的babel-core

二、配置

在项目根目录下，即与.gulpfile文件同一目录，创建.babelrc文件

设置内容为：

{
    "presets": ["es2015"]
}

三、使用

1、在gulpfile中，引入插件

var babel =require("gulp-babel")

2、创建task任务

.pipe(babel())就是转换es6为es5

gulp.task('uglify', function(done){
    gulp.src('./src/js/**/*.js')
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
    done()
})