Как минимизировать функции ES6 с помощью gulp -uglify?

Ответ 1

Вы можете использовать gulp-babel как таковой...

let gulp = require('gulp');
let babel = require('gulp-babel');
let uglify = require('gulp-uglify');

gulp.task('minify', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    // [...]
});

Это приведет к тому, что ваш es6 будет на ранней стадии разработки и будет широко использоваться в качестве "простого" javascript к тому времени, когда вы минимизируете.

Может быть важно отметить - как отмечено в комментариях - основной компилятор babel поставляется как одноранговая зависимость в этом плагине. В случае, если ядро lib не будет удалено из-за другого хранилища в вашем репо, убедитесь, что оно установлено на вашем конце.

Рассматривая равноправную зависимость в gulp-babel, автор указывает @babel/core (7.x). Тем не менее, немного более старый babel-core (6.x) также будет работать. Я предполагаю, что автор (который одинаков для обоих проектов) находится в процессе реорганизации имен своих модулей. В любом случае обе конечные точки установки npm указывают на https://github.com/babel/babel/tree/master/packages/babel-core, так что вы будете в порядке с любым из следующих...

npm install babel-core --save-dev

или

npm install @babel/core --save-dev

Ответ 2

Принятый ответ на самом деле не отвечает, как минимизировать прямой es6. Если вы хотите минимизировать es6 без транспаранта, gulp-uglify v3.0.0 делает это возможным:

Обновление марта 2019 года

Используя мой оригинальный ответ, вы можете заменить пакет uglify-es на terser, так как кажется, что uglify-es больше не поддерживается.

Оригинальный ответ, все еще работает:

1.) Сначала обновите ваш пакет gulp-uglify до> 3.0.0. Если вы используете пряжу и хотите обновить ее до последней версии:

yarn upgrade gulp-uglify --latest

2.) Теперь вы можете использовать uglify-es, "версию es6" для uglify:

const uglifyes = require('uglify-es');
const composer = require('gulp-uglify/composer');
const uglify = composer(uglifyes, console);

gulp.task('compress', function () {
    return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});

Для получения дополнительной информации: https://www.npmjs.com/package/gulp-uglify

Ответ 3

На самом деле вы можете очистить код ES6 без трансиляции. Вместо плагина gulp-uglify используйте плагин gulp-uglifyes.

var gulp = require('gulp');
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglifyes');
var plumber = require('gulp-plumber');
var plumberNotifier = require('gulp-plumber-notifier');
var sourcemaps = require('gulp-sourcemaps');
var runSequence = require('run-sequence').use(gulp);

gulp.task('minjs', function () {
  return gulp.src(['/dist/**/*.js', '!/dist/**/*.min.js'])
    .pipe(plumberNotifier())
    .pipe(sourcemaps.init())
    .pipe(uglify({ 
       mangle: false, 
       ecma: 6 
    }))
    .pipe(rename(function (path) {
      path.extname = '.min.js';
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('/dist'));
});

Ответ 4

проглатывать-уродовать:

Для ES6 и новее.

1. установить: npm install --save-dev gulp-uglify
2. установить: npm install --save-dev gulp-babel @babel/core @babel/preset-env

Использование:

const gulp = require('gulp'); 
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('script', () => {
    return gulp.src('src/**/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('src/dist'))
});

Ответ 5

К сожалению, в настоящее время вы не можете использовать uglify с кодом es-next, вы можете:

• Перейдем к ES5 с помощью Babel
• Используйте Babili вместо Uglify.