Gulp uglify не может работать со стрелками

Я пытаюсь сжать мой проект с помощью gulp-uglify, однако gulp, кажется, бросает ошибку Unexpected token: punc () всякий раз, когда он встречает функцию со стрелкой в коде. Есть ли что-нибудь, что я могу сделать, чтобы исправить это? Спасибо.

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"]);

Ответы

Ответ 1

Функции стрелок - это функция ES6. Babel (и другие) предназначены для перевода ES6 на ES5 или ранее как часть вашего процесса сборки. К счастью, есть плагины Babel для Gulp и Grunt. Запустите Babel, прежде чем угадать.

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

Я надеюсь, что это направит вас в правильном направлении/кто-то может продемонстрировать некоторый код.

Ответ 2

Нет никаких вспомогательных инструментов uugilify (minify) для синтаксиса ES6. вы должны создать задачу gulp после компиляции babel (es6 → es5)

1.Установить пакеты

npm install gulp-babel babel-preset-es2015

2. измените свой код, как показано ниже.

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

Ответ 3

Вы можете использовать babel minify (ранее Babili) библиотеку на основе babel, чтобы минимизировать код ES6 без пересылки:

Сначала установите через npm:

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

Затем в вашем файле 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'))
})

Он использует babel как парсер, но нет транспиляции.

Ответ 4

Я пробовал бабели, это было сосать. время сборки заняло у меня 40-е. И я не хочу переводить код на es5 в любом случае

Я предпочитаю использовать uglify-es, следуя описаниям https://www.npmjs.com/package/uglify-es https://www.npmjs.com/package/gulp-uglify

Мое время сборки составляет 10 секунд. У меня есть терпение ждать 10 лет.

Это мой 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()))

Ответ 5

Это то, что я использую для useref с angular и 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('./'));
});