gulp unable to minify JavaScript

gulp 用自动化构建工具增强你的工作流程！

前端开发中，使用gulp打包的时候一直很顺利，但今天打包压缩js时，出错 ，错误提示：unable to minify JavaScript。度娘搜索了一圈，尝试了其他博主的方法， 并没有解决我的问题。
gulpfile.js中代码：

gulp.task('js', function () {
  return gulp.src('src/js/*.js')  // 找到目标原文件，将数据读取到gulp的内存中
    .pipe(concat('build.js'))  // 临时合并文件, 文件名bulid.js
    .pipe(gulp.dest('dist/js/'))  // 输出文件到本地
    .pipe(uglify())  // 压缩文件
    .pipe(rename({ suffix: '.min' }))  // 重命名
    .pipe(gulp.dest('dist/js/'))
})

下面来说一说我解决的具体步骤，希望能帮助到遇到此问题的啊猿。

一、分析原因

javascirpt语法问题，在es5环境里使用了es6、es7语法，uglify这个插件不兼容es6等语法

二、解决办法

此时如果你要每个文件去找es6代码块，修改为es5，这种方法可行，但很蠢也不切实际。
解决思路：gulp + babel将es6代码转为es5
步骤：

1.安装babel等相关插件

• npm install gulp-babel --save-dev
• npm install @babel/core@^7.0.0 --save-dev
• npm install babel-preset-env --save-dev

2.在项目跟目录下新建文件.babelrc，进行相关配置

{
  "presets": ["env"]
}

3.在gulpfile.js开头引入babel插件

// 获取babel插件
const babel = require('gulp-babel');

4.在gulpfile.js中使用babel插件。

在js压缩/合并之前使用babel()将es6语法转换为es5后，再进行压缩/合并，具体代码如下

gulp.task('js', function () {
  return gulp.src('src/js/*.js') 
    .pipe(babel()) // 合并之前将es6语法转换为es5
    .pipe(concat('build.js'))  // 临时合并文件, 文件名bulid.js
    .pipe(gulp.dest('dist/js/'))  // 输出文件到本地
    .pipe(uglify())  // 压缩文件
    .pipe(rename({ suffix: '.min' }))  // 重命名
    .pipe(gulp.dest('dist/js/'))
})

5.在命令行输入gulp js即可顺利完成打包，以上错误也成功解决。

福利：自己总结的前端常用插件，亲测非常好用 前端插件