Gulp uglify не может обрабатывать функции стрелок

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

глоток-краш-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"]);

javascript gulp ecmascript-6 gulp-uglify
person Paradoxis    schedule 23.03.2016    source источник
comment
Вы можете попрактиковаться с функциями стрелок в gulpfile.js. Но сначала проверьте свою версию node.js.   -  person Oleksii    schedule 23.03.2016

Ответы (6)


arrow_upward
26
arrow_downward

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

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

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

person Jxx    schedule 23.03.2016
comment
@Rein Вы также можете использовать ветвь гармонии uglify. npmjs.com/package/uglify-js-harmony - person Charles Ferentchak; 10.03.2017
comment
Появляется последний модуль gulp-ugligy-es, который будет обрабатывать ES6. Другие упомянутые модули устарели / больше не поддерживаются. Ссылка: npmjs.com/package/gulp-uglify-es - person Steve Isenberg; 20.05.2018
comment
@Jxx У вас есть какое-нибудь объяснение, почему запускать babel перед uglify? - person inafalcao; 12.07.2020

arrow_upward
23
arrow_downward

Для синтаксиса ES6 нет поддерживающих инструментов ugilify(minify). вы должны собрать задачу 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("./"))
    });
person superui    schedule 23.03.2016
comment
Я не знаю, почему люди здесь, я даю советы с babel, вопрос явно заключался в том, как минимизировать код ecma6, и этот вопрос до сих пор остается без ответа. - person Ivan; 09.08.2016
comment
Вставка .pipe(uglify({ compress: true }) в приведенный выше ответ приведет к сокращению кода ES2015. - person Andrew Hill; 25.11.2016

arrow_upward
11
arrow_downward

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

Первая установка через npm:

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

Затем в вашем файле глотка:

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, но нет транспиляции.

person Gabriel Furstenheim    schedule 26.08.2016
comment
Стоит отметить, что Babili требует node›=4.0.0 - person vandre; 06.01.2017
comment
я предпочитаю этот метод, так как я ориентируюсь на ES6 - person ColacX; 09.07.2017
comment
У меня не сработало ... установка не кажется правильной. Ошибка: не удается найти модуль «gulp-babel» — почему вы устанавливаете babel-preset-minify и называете его gulp-babel? Вы пробовали свою собственную установку перед публикацией? - person john blair; 02.06.2020
comment
@johnblair Очевидно, вам нужно установить gulp-babel, так как вы требуете, то же самое касается gulp. Я добавил установку в предустановку, потому что из кода это не очевидно, Babel загружает ее из конфигурации. - person Gabriel Furstenheim; 02.06.2020
comment
Ok. Я отказался от Babel, так как обнаружил множество проблем с несовместимостью версий, и мне на самом деле не нужна была транспиляция — только минимизация. Размещение кода здесь, если кто-то еще найдет его полезным. uglify = require(gulp-uglifyes) // Минимизировать файл .pipe(uglify({ mangle: true, ecma: 6 })) - person john blair; 03.06.2020

arrow_upward
3
arrow_downward

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

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

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

Это мой глоток

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()))
person ColacX    schedule 09.07.2017

arrow_upward
0
arrow_downward

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

arrow_upward
0
arrow_downward

сначала "вавилон" файл .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

чем "уродовать" его

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

Быть установленным

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