Gulp uglify incapable de gérer les fonctions de flèche
j'essaie de comprimer mon projet en utilisant gulp-uglify, cependant gulp semble jeter l'erreur Unexpected token: punc () chaque fois qu'il rencontre une fonction de flèche dans le code. Est-ce que je peux faire pour résoudre ce problème? Remercier.
goup-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!");
});
gulffile.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"]);
6 réponses
les fonctions de flèche sont des fonctions 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 ya Babel plug-ins pour Gulfp et Grunt. Exécuter Babel avant uglify.
https://www.npmjs.com/package/gulp-babel
j'espère que cela vous oriente dans la bonne direction/quelqu'un peut démontrer un certain code.
il n'y a pas d'outils de support ugilify(minify) pour la syntaxe ES6. vous devez être construire gulp tâche après babel compiler (es6 -> es5)
1.Installer des paquets
npm install gulp-babel babel-preset-es2015
2.modifier 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("./"))
});
Vous pouvez utiliser babel rapetisser (précédemment Babili) une bibliothèque basée sur babel pour minifier le code ES6 sans transpirer:
première installation via npm:
npm install --save-dev babel-preset-minify
puis dans votre fichier gulfp:
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'))
})
j'ai essayé babeli ça craint. le temps de construction m'a pris des années 40. Et je ne cherche pas à transpile le code dans l'es5 de toute façon
je préfère utiliser uglify-es suivre les descriptions https://www.npmjs.com/package/uglify-es https://www.npmjs.com/package/gulp-uglify
Mon temps de construire sont maintenant 10s. J'ai la patience d'attendre 10s.
C'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()))
C'est ce que j'utilise pour useref angulaire 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('./'));
});
d'abord "babel" de la .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
'uglify'
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
Pour être installé
npm install --save-dev gulp-babel babel-core babel-preset-env
npm install uglify-es -g
npm install pump