javascript - usar - Gulp uglify no puede manejar las funciones de flecha

sintaxis funcion flecha

Question

Estoy tratando de comprimir mi proyecto usando gulp-uglify , sin embargo, gulp parece lanzar el error. Error Unexpected token: punc () cuando encuentra una función de flecha en el código. ¿Hay algo que pueda hacer para solucionar esto? Gracias.

gulp-crash-test.js

// Function with callback to simulate the real code
function test(callback) {
    if (typeof callback === "function") callback();
}

// Causes a crash
test(() => {
    console.log("Test ran successfully!");
});

// Doesn''t cause a crash
test(function () {
    console.log("Test ran successfully!");
});

gulpfile.js

var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");

gulp.task("scripts", function() {
    gulp.src([
        "./gulp-crash-test.js"
    ]).pipe(
        concat("gulp-crash-test.min.js")
    ).pipe(
        uglify().on(''error'', function(e){
            console.log(e);
        })
    ).pipe(
        gulp.dest("./")
    );
});

gulp.task("watch", function() {
    gulp.watch("./gulp-crash-test.js", ["scripts"]);
});

gulp.task("default", ["watch", "scripts"]);

Answer 1

Esto es lo que uso para useref con angular y babel.

gulp.task(''concat-js'', [''your dependency task''],function(){
  return gulp.src(''dev/dev_index/index.html'')
    .pipe(useref())
    .pipe(gulpif(''*.js'', ngAnnotate())) // if you use angular
    .pipe(gulpif(''*.js'',babel({
        compact: false,
        presets: [[''es2015'', {modules: false}]]
     })))
    .pipe(gulpif(''*.js'', uglify({ compress: false })
    .pipe(gulp.dest(''./''));
});

Answer 2

Las funciones de flecha son una característica de ES6. Babel (y otros) están diseñados para traducir ES6 a ES5 o antes como parte de su proceso de construcción. Por suerte hay complementos de Babel para Gulp y Grunt. Ejecuta Babel antes de uglificar.

https://www.npmjs.com/package/gulp-babel

Espero que esto lo guíe en la dirección correcta / alguien puede demostrar algún código.

Answer 3

No hay herramientas de compatibilidad (minificar) para la sintaxis de ES6. debería compilarse de forma sencilla después de compilar babel (es6 -> es5)

1.Instalar paquetes

npm install gulp-babel babel-preset-es2015

2. Cambie su código de la siguiente manera.

    var gulp = require("gulp");
    var concat = require("gulp-concat");
    var uglify = require("gulp-uglify");
    var babel  = require(''gulp-babel'');

    gulp.task("scripts", function() {
        return gulp.src(["./gulp-crash-test.js"])
    .pipe(babel({presets: [''es2015'']}))
    .pipe(concat("gulp-crash-test.minjs"))
    .pipe(uglify().on(''error'', function(e){
         console.log(e);
    }))
    .pipe(gulp.dest("./"))
    });

Answer 4

Puede usar babel minify (anteriormente Babili) una biblioteca basada en babel para minimizar el código ES6 sin necesidad de transpilar:

Primero instale vía npm:

npm install --save-dev babel-preset-minify

Luego en su archivo trago:

var gulp = require(''gulp'')
var babel = require(''gulp-babel'')
gulp.task(''default'', () => {
  return gulp.src(''src/app.js'')
  .pipe(babel({presets: [''minify'']}))
  .pipe(gulp.dest(''dist''))
})

Utiliza babel como analizador, pero no hay transpilación.

Answer 5

Traté de babeli que un poco chupó. el tiempo de construcción me llevó 40s. Y no estoy buscando transpilar el código en es5 de todos modos

Prefiero usar uglify-es siga las descripciones https://www.npmjs.com/package/uglify-es https://www.npmjs.com/package/gulp-uglify

Mis tiempos de construcción son ahora 10s. Tengo la paciencia para esperar 10s.

Este es mi gulpfile

var gulp = require(''gulp'');
var uglifycss = require(''gulp-uglifycss'');
var htmlminifier = require(''gulp-html-minifier'');
var useref = require(''gulp-useref'');
var gulpif = require(''gulp-if'');
var clean = require(''gulp-clean'');
var uglifyes = require(''uglify-es'');
var composer = require(''gulp-uglify/composer'');
var minifyes = composer(uglifyes, console);

.pipe(gulpif(''*.js'', minifyes()))

Answer 6

primero ''babel'' el archivo .js

var babel = require(''gulp-babel'');
gulp.task(''babel-js'', () =>
gulp.src(''js/main.js'')
 .pipe(babel({presets: [''env'']}))
 .pipe(gulp.dest(''build/babel''))
);

https://www.npmjs.com/package/gulp-babel

que ''uglificarlo''

var uglify = require(''gulp-uglify''), pump = require(''pump'');
gulp.task(''uglify-js'', function (cb) {
   pump([
     gulp.src(''build/babel/main.js''),
     uglify(),
     gulp.dest(''build/js'')
   ],
   cb
);
});

https://www.npmjs.com/package/gulp-uglify

Para ser instalado

npm install --save-dev gulp-babel babel-core babel-preset-env
npm install uglify-es -g
npm install pump