前言

Gulp.js 是一個(gè)自動(dòng)化構(gòu)建工具,開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動(dòng)執(zhí)行常見任務(wù)。最近復(fù)習(xí)一下gulp一些基本的寫法，在寫了一些簡單的uglify,rename,concat,clean的處理之后，發(fā)現(xiàn)都還記得這些基本語法。然后無意間就想在demo中寫下export function會(huì)變成怎樣，結(jié)果發(fā)現(xiàn)gulp并不支持直接的es6語法，而且提示的錯(cuò)誤也讓人模棱兩可。

events.js:182
 throw er; // Unhandled 'error' event
 ^
GulpUglifyError: unable to minify JavaScript

這著實(shí)讓我頭疼了一會(huì)，百度后才明白這是解析es6語法錯(cuò)誤。

于是按照網(wǎng)上說的安裝了gulp-babel,然后配置一個(gè).babelrc的文件，再根據(jù)報(bào)錯(cuò)提示安裝了@babel/core，結(jié)果發(fā)現(xiàn)編譯是不報(bào)錯(cuò)了，但是編輯結(jié)果后的文件還是出不來。

gulp.task('miniJS', function(){
		 gulp.src(['demo.js', 'demo2.js'])
		 	.pipe(concat('demoFile.js'))
			.pipe(babel())
			.pipe(gulp.dest('./finalFile/'))
})

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

官網(wǎng)提示方法：

# 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",

這個(gè) @babel/preset-env  包就算沒有安裝也并不會(huì)報(bào)錯(cuò)確實(shí)是坑，安裝好需要的包后根據(jù)官網(wǎng)給的樣例：

.pipe(babel({ 
   presets: ['@babel/env']  
  }))

同時(shí)需要去除掉創(chuàng)建的.babelrc文件，好像兩者會(huì)有沖突，.babelrc文件存在的同時(shí)導(dǎo)致不會(huì)輸出編譯后的文件。這樣一來export關(guān)鍵字就有用武之地了，但是在es6中

function demoFunc(){
 //something
}
export demoFunc;

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

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

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

這樣一來uglify就可以對(duì)es6進(jìn)行解析了：

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。