¿Cómo minificar las funciones de ES6 con gulp-uglify?

Solución:

Puede aprovechar gulp-babel como tal …

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

Esto transpilará su es6 al principio de la canalización y se convertirá en un javascript “simple” ampliamente soportado para el momento en que minimice.

---

Puede ser importante tener en cuenta – como se señaló en los comentarios – el compilador principal de babel se envía como una dependencia de pares en este complemento. En caso de que la biblioteca principal no se elimine a través de otro depósito en su repositorio, asegúrese de que esté instalado en su extremo.

Observando la dependencia de los pares en gulp-babel el autor especifica @ babel / core (7.x). Sin embargo, el babel-core (6.x) un poco más antiguo también funcionará. Supongo que el autor (que es el mismo para ambos proyectos) está reorganizando la denominación de sus módulos. De cualquier manera, ambos extremos de instalación de npm apuntan a https://github.com/babel/babel/tree/master/packages/babel-core, por lo que estará bien con cualquiera de los siguientes …

npm install babel-core --save-dev

o

npm install @babel/core --save-dev

La respuesta aceptada no De Verdad responder cómo minificar directamente es6. Si desea minificar es6 sin transpilar, gulp-uglify v3.0.0 lo hace posible:

Actualización de marzo de 2019

Usando mi respuesta original, definitivamente desea reemplazar el paquete uglify-es con terser, ya que parece que uglify-es ya no se mantiene.

Respuesta original, todavía funciona:

1.) Primero, actualice su paquete gulp-uglify a> 3.0.0 Si está usando yarn y desea actualizar a la última versión:

yarn upgrade gulp-uglify --latest

2.) Ahora puedes usar uglify-es, la “versión es6” de uglify, así:

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

Para más información: https://www.npmjs.com/package/gulp-uglify

De hecho, puede uglificar el código ES6 sin transpilación. En lugar de gulp-uglify complemento, uso gulp-uglifyes enchufar.

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

---

---

Utiliza Nuestro Buscador