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');

3.在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/'))
})

4.在命令行輸入gulp js即可順利完成打包，以上錯誤也成功解決。

福利：自己總結的前端常用插件，親測非常好用 前端插件