当我运行gulp时，出现以下错误：
[12:54:14] { [GulpUglifyError: unable to minify JavaScript]
cause:
{ [SyntaxError: Unexpected token: operator (>)]
message: 'Unexpected token: operator (>)',
filename: 'bundle.js',
line: 3284,
col: 46,
pos: 126739 },
plugin: 'gulp-uglify',
fileName: 'C:\servers\vagrant\workspace\awesome\web\tool\bundle.js',
showStack: false }
违规行包含一个箭头函数：
let zeroCount = numberArray.filter(v => v === 0).length
我知道我可以用以下内容替换它，以通过放弃 ES6 语法来纠正缩小错误：
let zeroCount = numberArray.filter(function(v) {return v === 0;}).length
如何通过 gulp 缩小包含 ES6 功能的代码？
你可以这样利用gulp-babel...
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('minify', () => {
return gulp.src('src/**/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
// [...]
});
这将在管道的早期转译您的 es6，并在您缩小时大量生成为广泛支持的"纯"JavaScript。
可能需要注意的是- 正如评论中指出的那样 - 核心 babel 编译器在此插件中作为对等依赖项提供。如果核心库没有通过存储库中的另一个 dep 下拉，请确保将其安装在您的终端上。
查看作者指定@babel/核心 (7.x(gulp-babel中的对等依赖关系。不过，稍旧的 babel-core (6.x( 也可以工作。我的猜测是作者(两个项目都是一样的(正在重组他们的模块命名。无论哪种方式，两个 npm 安装端点都指向 https://github.com/babel/babel/tree/master/packages/babel-core，因此你可以使用以下任一方式...
npm install babel-core --save-dev
或
npm install @babel/core --save-dev
接受的答案并没有真正回答如何缩小直 es6。如果你想在不转译的情况下缩小 es6，gulp-uglify v3.0.0 使这成为可能：
2019年3月更新
使用我最初的答案，您肯定想用terser替换uglify-es软件包，因为似乎不再维护uglify-es。
原答案，仍然有效：
1.( 首先，将你的 gulp-uglify 软件包升级到> 3.0.0 如果您使用的是 yarn 并希望更新到最新版本：
yarn upgrade gulp-uglify --latest
2.(现在你可以使用uglify-es，丑陋的"es6版本"，如下所示：
const uglifyes = require('uglify-es');
const composer = require('gulp-uglify/composer');
const uglify = composer(uglifyes, console);
gulp.task('compress', function () {
return gulp.src('src/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});
更多信息： https://www.npmjs.com/package/gulp-uglify
你实际上可以在不转译的情况下丑化 ES6 代码。与其使用gulp-uglify插件，不如使用gulp-uglifyes插件。
var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglifyes');
var plumber = require('gulp-plumber');
var plumberNotifier = require('gulp-plumber-notifier');
var sourcemaps = require('gulp-sourcemaps');
var runSequence = require('run-sequence').use(gulp);
gulp.task('minjs', function () {
return gulp.src(['/dist/**/*.js', '!/dist/**/*.min.js'])
.pipe(plumberNotifier())
.pipe(sourcemaps.init())
.pipe(uglify({
mangle: false,
ecma: 6
}))
.pipe(rename(function (path) {
path.extname = '.min.js';
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('/dist'));
});
gulp-uglify：
适用于ES6和更新。
- 安装：
npm install --save-dev gulp-uglify - 安装：
npm install --save-dev gulp-babel @babel/core @babel/preset-env
用法：
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
gulp.task('script', () => {
return gulp.src('src/**/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('src/dist'))
});
在让它工作之前，我为此工作了一段时间。正如其他答案所说，问题是gulp-uglify不支持ES6。gulp-uglify-es确实如此，但是如果不再维护。Terser是其他人推荐的，但它不能很好地与gulp一起使用，并与pipe()一起使用。
如果你像我一样使用gulp-uglify，你的gulpfile.js看起来像这样：
var uglify = require('gulp-uglify');
const html2js = () => {
var source = gulp.src(config.appFiles.templates);
return source
.pipe(concat('templates-app.js'))
.pipe(uglify())
.pipe(gulp.dest(config.buildDir));
};
但是，您可以使用gulp-terser软件包，它很容易更换并获得相同的功能：
var terser = require('gulp-terser');
const html2js = () => {
var source = gulp.src(config.appFiles.templates);
return source
.pipe(concat('templates-app.js'))
.pipe(terser())
.pipe(gulp.dest(config.buildDir));
};
使用 gulp-uglify-es 而不是gulp-uglify帮助我完美地完成了与你要求相同的
目标当前(2021 年 11 月(最简单的转译和丑化方法是使用gulp-terser.
如果您已经在使用gulp-uglify那么只需安装gulp-terser并将"uglify"更改为"terser"即可完成。
const uglifyes = require('terser');
gulp.task('compress', function () {
return gulp.src('src/*.js')
.pipe(terser())
.pipe(gulp.dest('dist'))
});
不幸的是，到目前为止，您不能将uglify与es-next代码一起使用， 您可以：
- 使用Babel转译为
ES5 - 使用
Babili而不是Uglify。
module.exports = {
...
optimization: {
minimize: true
},
...
}
webpack 可以完成这项工作