Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。最近复习一下gulp一些基本的写法,在写了一些简单的uglify,rename,concat,clean的处理之后,发现都还记得这些基本语法。

\"\"

然后无意间就想在demo中写下export function会变成怎样,结果发现gulp并不支持直接的es6语法,而且提示的错误也让人模棱两可。

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

这着实让我头疼了一会,百度后才明白这是解析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/\'))
})//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860

后来索性直接去了gulp-babel官网看,才明白3个月之前gulp-babel进行了更新,而我更新的是最新的gulp-babel包,而我搜索到的解决方法都是很早之前的,自然无法匹配。

官网提示方法:

# Babel 7
$ npm install --save-dev gulp-babel @babel/core @babel/preset-env
//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860 
# 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
}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
export demoFunc;

这段代码是生效的,但是babel()好像认定是个解析不出的代码,不会解析输出文件,不知道是什么问题,我也处于懵逼中。
换成如下的方式是可以的:

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

这样一来uglify就可以对es6进行解析了:

.pipe(babel({
    presets: [\'@babel/env\']
}))//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
.pipe(uglify())
.pipe(gulp.dest(\'file\'))

结语

感谢您的观看,如有不足之处,欢迎批评指正。

收藏 打印