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