javascript - es6 - gulp uglify css

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

Question

Cuando ejecuto Gulp me sale el siguiente error:

[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 línea ofensiva contiene una función de flecha:

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

Sé que puedo reemplazarlo con lo siguiente para remediar el error de minificación:

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

¿Cómo puedo ejecutar gulp en el código que contiene las características de ES6 sin causar errores en la minificación?

Answer 1

En realidad, puede uglificar el código ES6 sin la transpilación. En lugar del complemento gulp-uglify , use el complemento 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 2

La respuesta aceptada en realidad no responde a cómo minimizar directamente es6. Si desea minimizar es6 sin transpilar, gulp-uglify v3.0.0 lo hace posible:

1.) Primero, actualice su paquete gulp-uglify a> 3.0.0 Si está usando hilo 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

Answer 3

Puede aprovechar gulp-babel como tal ...

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

Esto transpilará su es6 temprano en la tubería y producirá un javascript "normal" ampliamente soportado para el momento en que minimice.

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

En cuanto a la dependencia entre pares en gulp-babel el autor está especificando @ babel / core (7.x). Sin embargo, el babel-core poco mayor (6.x) también funcionará. Mi conjetura es que el autor (que es el mismo para ambos proyectos) está en medio de reorganizar el nombre de sus módulos. De cualquier manera, ambos puntos finales de instalación 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

Answer 4

desafortunadamente, según ahora, no puede usar uglify con el código de es-next , puede:

1. Transpile a ES5 utilizando Babel
2. Use Babili lugar de Uglify .

Answer 5

gulp-uglify

Para ES6 y posteriores.

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

Uso:

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