Comment minimiser les fonctions de ES6 avec gulp-uglify?

Question

Lorsque je lance gulp, j'obtiens le message d'erreur suivant:

 [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 }
 

La ligne incriminée contient une fonction de flèche:

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

Je sais que je peux le remplacer par ce qui suit pour remédier à l'erreur de minification:

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

Comment puis-je exécuter gulp sur du code contenant des fonctionnalités ES6 sans provoquer l'échec de minification?

Answer 1

Vous pouvez tirer parti de gulp-babel en tant que tel...

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())
    // [...]
});

Ce sera transpile votre es6 tôt dans le pipeline et le taux de désabonnement comme largement pris en charge "claire" javascript par le temps que vous rapetisser.

---

Peut-être important de noter , comme souligné dans les commentaires - le cœur de babel compilateur les navires comme des pairs de dépendance dans ce plugin. Dans le cas où la base de la lib n'est pas tiré vers le bas par un autre dep dans votre pension, s'assurer que c'est installé sur votre fin.

En regardant les pairs de la dépendance en gulp-babel l'auteur est de spécifier @babel/core (7.x). Cependant, le plus légèrement babel-core (6.x) fonctionnera aussi bien. Ma conjecture est que l'auteur (qui est la même pour les deux projets) est en plein coeur de la réorganisation de leur module de nommage. De toute façon, les deux mnp installation de points de terminaison du point de https://github.com/babel/babel/tree/master/packages/babel-coredonc vous serez très bien avec l'une des suivantes...

npm install babel-core --save-dev

ou

npm install @babel/core --save-dev

Answer 2

L'on a accepté la réponse n'a pas vraiment de réponse comment minifier les droites es6. Si vous voulez rapetisser l'es6 sans transpiling, gulp-uglify v3.0.0, c'est possible:

Mise À Jour Mars 2019

À l'aide de ma réponse originale à cette question, vous pouvez remplacer la uglify-es de paquet avec terser, comme il semble uglify-es n'est plus maintenu.

Réponse originale à cette question, fonctionne encore:

1.) Tout d'abord, la mise à niveau de votre gulp-uglify package > 3.0.0 Si vous êtes à l'aide de fil et souhaitez mettre à jour vers la dernière version:

yarn upgrade gulp-uglify --latest

2.) Maintenant, vous pouvez utiliser uglify-es, le "es6 version" de uglify, de la manière suivante:

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

Pour plus d'info: https://www.npmjs.com/package/gulp-uglify

Answer 3

En réalité, vous pouvez modifier le code ES6 sans transpilation. Au lieu de gulp-uglify plugin, utilisez gulp-uglifyes plugin.

 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

gulp-uglify:

Pour ES6 et plus récent.

1. installer: npm install --save-dev gulp-uglify
2. installer: npm install --save-dev gulp-babel @babel/core @babel/preset-env

Usage:

 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 5

Malheureusement, à ce jour, vous ne pouvez pas utiliser le code uglify avec es-next , vous pouvez:

1. Transpiler à ES5 utilisant Babel
2. Utilisez Babili au lieu de Uglify .