如何使用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 }

违规行包含箭头功能:

var zeroCount = numberArray.filter(v => v === 0).length

我知道我可以用以下内容替换它来弥补缩小错误:

var zeroCount = numberArray.filter(function(v) {return v === 0;}).length

如何在包含ES6功能的代码上运行gulp而不会导致缩小失败？

Answer 1

你可以利用gulp-babel ......

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

gulp.task('minify', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    // [...]
});

这将在您的管道中提前转换您的es6,并在您缩小时作为广泛支持的"普通"JavaScript生成.

值得注意的是 - 正如评论中所指出的那样 - 核心babel编译器在此插件中作为对等依赖项发布.如果没有通过您的仓库中的另一个dep下拉核心库,请确保在您的末端安装了该库.

综观对等体依赖性在gulp-babel作者是指定@巴贝尔/芯(7.x中).虽然,稍微老一点的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

Answer 2

接受的答案并没有真正回答如何缩小直接es6.如果你想在没有转换的情况下缩小es6,gulp-uglify v3.0.0可以实现:

1.)首先,将gulp-uglify软件包升级到> 3.0.0如果您正在使用yarn并想要更新到最新版本:

yarn upgrade gulp-uglify --latest

2.)现在你可以使用uglify-es,uglify的"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

Answer 3

实际上,您可以在不进行转换的情况下使用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'));
});

Answer 4

吞咽丑化：

对于ES6和更新。

1. 安装： npm install --save-dev gulp-uglify
2. 安装： 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'))
});