如何使用 gulp-uglify 缩小 ES6 函数？

Question

当我运行 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 功能的代码？

Answer 1

不幸的是，按照现在的情况，您不能将 uglify 与 es-next 代码 一起使用，你可以：

使用 Babel

ES5

使用Babili代替Uglify。

Answer 2

您可以这样利用 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，并在您缩小时得到广泛支持 "plain" javascript。

可能需要注意 - 正如评论中指出的那样 - 核心 babel 编译器作为 peer dependency 发布在这个插件中。如果核心库没有通过您的存储库中的另一个 dep 被拉下，请确保它已安装在您的端。

查看 peer dependency in gulp-babel the author is specifying @babel/core (7.x). Though, the slightly older babel-core (6.x) will work as well. My guess is the author (who is the same for both projects) is in the midsts of reorganizing their module naming. Either way, both npm installation endpoints point to https://github.com/babel/babel/tree/master/packages/babel-core，所以您可以满足以下任一条件...

npm install babel-core --save-dev

或

npm install @babel/core --save-dev

Answer 3

您实际上可以在不进行转译的情况下对 ES6 代码进行丑化。使用 gulp-uglifyes 插件代替 gulp-uglify 插件。

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'));
});

Answer 4

已接受的答案确实没有回答如何缩小直接 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，即uglify的"es6 version"，如下：

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

Answer 5

gulp-丑化：

对于 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'))
});

Answer 6

使用 gulp-uglify-es 而不是 gulp-uglify 帮助我完美地完成了你所要求的

Answer 7

在开始工作之前，我为此工作了一段时间。正如其他答案所述，问题是 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));
};

Answer 8

module.exports = {
  ...
  optimization: {
    minimize: true
  },
  ...
}

webpack 可以胜任

Answer 9

当前（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'))
});

如何使用 gulp-uglify 缩小 ES6 函数？

How to minify ES6 functions with gulp-uglify?

javascript

node.js

ecmascript-6

gulp

gulp-uglify