javascript - online - Come minimizzare le funzioni ES6 con gulp-uglify?




var uglify require(' gulp uglify '); (4)

In realtà puoi ugolare il codice ES6 senza transpilation. Invece del plugin gulp-uglify , usa il plugin 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'));
});

Quando eseguo gulp ottengo il seguente errore:

[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 riga incriminata contiene una funzione di freccia:

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

So che posso sostituirlo con quanto segue per rimediare all'errore di minification:

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

Come posso eseguire gulp sul codice che contiene le funzionalità ES6 senza causare errori di minification?


La risposta accettata in realtà non risponde come minimizzare dritto es6. Se si desidera minimizzare es6 senza transpiling, gulp-uglify v3.0.0 rende possibile ciò:

Aggiornamento marzo 2019

Usando la mia risposta originale, potresti voler sostituire il pacchetto uglify-es con terser , poiché sembra che l'uglify non venga più mantenuto.

Risposta originale, funziona ancora:

1.) Per prima cosa, aggiorna il tuo pacchetto gulp-uglify a> 3.0.0 Se stai usando il filato e vuoi aggiornarlo all'ultima versione:

yarn upgrade gulp-uglify --latest

2.) Ora puoi usare uglify-es, la "versione es6" di uglify, in questo modo:

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

Per maggiori informazioni: https://www.npmjs.com/package/gulp-uglify


sfortunatamente, come ora, non puoi usare uglify con es-next code , puoi:

  1. Trasponi a ES5 usando Babel
  2. Usa Babili invece di Uglify .

gulp-uglify:

Per ES6 e successivi.

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




gulp-uglify