web-dev-qa-db-fra.com

Gulp uglify incapable de gérer les fonctions de flèche

J'essaie de compresser mon projet en utilisant gulp-uglify. Cependant, gulp semble renvoyer l'erreur Unexpected token: punc () chaque fois qu'il rencontre une fonction de flèche dans le code. Y a-t-il quelque chose que je puisse faire pour résoudre ce problème? Je vous remercie.

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"]);
javascriptgulpecmascript-6gulp-uglify
21
Paradoxis

Les fonctions de flèche sont une fonctionnalité de l'ES6. Babel (et d’autres) sont conçus pour traduire ES6 en ES5 ou plus tôt dans le cadre de votre processus de construction. Heureusement, il existe des plug-ins Babel pour Gulp et Grunt. Lancez Babel avant de vexer.

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

J'espère que cela vous oriente dans la bonne direction/quelqu'un peut démontrer du code.

22
James Garner

Il n'y a pas d'outils ugilify (minify) de support pour la syntaxe ES6. vous devriez être construit avec gulp après la compilation de babel (es6 -> es5)

1. Installer les packages

npm install gulp-babel babel-preset-es2015

2.changez votre code comme ci-dessous.

    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("./"))
    });
23
superui

Vous pouvez utiliser babel minify (anciennement Babili) une bibliothèque basée sur babel pour minifier le code ES6 sans transpiler:

Première installation via npm:

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

Puis dans votre fichier gulp:

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

Il utilise babel comme analyseur syntaxique, mais il n’ya pas de transpilation.

11
Gabriel Furstenheim

J'ai essayé, Babeli, c'était un peu nul. construire le temps m'a pris 40 ans. Et je ne cherche pas à transpiler le code en es5 de toute façon

Je préfère utiliser uglify-es en suivant les descriptions https://www.npmjs.com/package/uglify-eshttps://www.npmjs.com/package/gulp- uglify

Mes temps de construction sont maintenant de 10. J'ai la patience d'attendre 10s.

Ceci est mon 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()))
3
ColacX

C'est ce que j'utilise pour useref avec angular et 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('./'));
});
0
Harel Levy

premier 'babel' le fichier .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 de 'uglifier'

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

Étre installé 

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