Sukka's Blog

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

解决 gulp-uglify 无法压缩(minify)ES6 的问题

Sukka's Avatar 2018-09-06 技术向

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

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

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

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

然后在 gulpfile.js 中压缩(minify)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 就可以直接压缩(minify)ES6 了,而且从后者切换到前者几乎是无缝迁移的。但是用这样的解决方案的话怎么水一篇文章(逃

UglifyJS 现在已经不再提供对 ES6 的支持,现在 uglify-es 分支已经被 Fork 和独立出来,作为一个独立的 terser 项目在维护。目前 gulp-uglify-es 也正在使用 terser 作为内置的压缩器。

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

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