Sukka's Blog

童话只美在真实却从不续写

最近在一个项目之中,运用到 gulp-uglify 压缩 JavaScript 文件,但是编写好 gulpfile.js 之后跑 gulp build 的时候却莫名其妙的报错了。把报错丢 Google 上一搜,在 Stack Overflow 找到了答案:虽然 Uglify 开发分支已经支持压缩 ES6,但是 gulp-uglify 并没有跟进、只支持压缩 ES5,碰巧我的代码中用到了一些 ES6 的写法,所以 gulp-uglify 不能识别、就报错了。

知道了问题的根源、换个关键词「gulp-uglify ES6」去 Google 搜一下,可以找到五花八门的解决方案,包括修改 node_modules 中 gulp-uglify 的依赖树到 UglifyJS 的最新分支的;但是可行性高但比较 dirty 的方案是先使用 babel 将 ES6 编译为 ES5 然后再继续使用 gulp-uglify 进行压缩。
虽然我的这个项目并不考虑浏览器兼容性,而且就为了使用 gulp-uglify 就引入 babel 看起来有些奇怪,但是反正实用主义至上,dirty hack 无所谓、能跑起来就行(误

思路有了,具体执行方案就简单了——在项目目录下执行 npm i gulp-babel @babel/core@7 babel-preset-env --save-dev 安装 babel 和其它必要依赖,再修改一下 gulpfile.js 引入 gulp-babel

let babel = require('gulp-babel');

然后在 gulpfile.js 中压缩 JavaScript 的函数中加上 babel 编译的流程:

function  minifyJS() {
return gulp.src('src/**/*.js')
+ .pipe(babel({
+ presets: ['env']
+ }))
.pipe(uglify({
output: {
comments: /^!/
}
}).on('error', function(e){
console.log(e);
}))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('dist'));
}

现在重新运行 gulp build 就不会报错了。

有没有不 dirty、更简洁的方案?当然有啦——你可以直接用 gulp-uglify-es 代替 gulp-uglify 就可以直接压缩 ES6 了,而且从后者切换到前者几乎是无缝迁移的。但是用这样的解决方案的话怎么水一篇文章(逃

本文作者 : Sukka
本文采用 CC BY-NC-SA 4.0 许可协议。转载和引用时请注意遵守协议!
本文链接 : https://blog.skk.moe/post/fix-gulp-uglify-es6-compatibility-issue/

本文最后更新于 天前,文中所描述的信息可能已发生改变