版权声明：原创文章，引用请注明出处！ https://blog.csdn.net/guang_s/article/details/84775233
需求分析：
- es6语法以及提供的强大api给前端带来了很大便利，可是部分浏览器无法识别es6语法
- gulp-ugilfy无法压缩es6，如果代码有使用es6的语法，则压缩会失败
- 打包的时候，我们需要将es6编译成es5
一、安装gulp-babel @babel/core @babel/preset-env模块
npm i -D gulp-babel @babel/core @babel/preset-env
二、gulp-babel参数说明
/**
* @param options {Object}
* {
* "presets": ["@babel/env"],
* "plugins": []
* }
*/
babel([options])
三、gulp-babel配置使用
1、在 babel() 里面直接配置
var babel = require('gulp-babel');
gulp.task('js_main', ['uglify_check'], function(){
return gulp.src('./src/js/*.js')
.pipe(concat('main.min.js')) // 合并文件并命名
.pipe(babel({ // 编译es6语法
presets: ["@babel/env"],
plugins: []
}))
.pipe(gulpif(env==='build', uglify())) // 判断是否压缩压缩js
.pipe(gulp.dest('./dist/js'));
});
2、新建 .babelrc 文件
配置改为：
gulp.task('js_main', ['uglify_check'], function(){
return gulp.src('./src/js/*.js')
.pipe(concat('main.min.js')) // 合并文件并命名
.pipe(babel()) // 编译es6语法
.pipe(gulpif(env==='build', uglify())) // 判断是否压缩压缩js
.pipe(gulp.dest('./dist/js'));
});
四、执行npm run dev，效果如下
1、编译前
2、编译后
.
项目地址（别忘了给星哦）
相关文章
gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp编译less，添加CSS前缀以及压缩css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题