前言

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

后來索性直接去了gulp-babel官網看，才明白3個月之前gulp-babel進行了更新，而我更新的是最新的gulp-babel包,而我搜索到的解決方法都是很早之前的，自然無法匹配。

官網提示方法：

# Babel 7$ npm install --save-dev gulp-babel @babel/core @babel/preset-env# 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}export demoFunc;

這段代碼是生效的，但是babel()好像認定是個解析不出的代碼，不會解析輸出文件，不知道是什么問題，我也處于懵逼中。

換成如下的方式是可以的：

export function demo(){	console.log('this is the first gulp demo');} export var num = {};

這樣一來uglify就可以對es6進行解析了：

.pipe(babel({	presets: ['@babel/env']})).pipe(uglify()).pipe(gulp.dest('file'))

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。