gulp-uglify не поддерживает ES6

15.02.2017 / #gulp

Как то раз, изучая AngularJS, захотелось автоматизировать процесс с помощью Gulp.
Скрипты необходимо будет собрать в один файл, затем минифицировать.

Окей, для минификации отлично подойдет gulp-uglify. Установим его:

npm i --save gulp-uglify

Теперь напишем задачу для сборки:

gulp.task('js', () => {
  return gulp.src([
      'app/js/app.js',
      'app/js/controllers/addUserCtrl.js'
    ])
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

Выполняем...ошибка. В чем дело?!

Потратив некоторое количество времени, решил спросить у Гугла.
Гугл быстро дал ответ и оказалось, что gulp-uglify просто не сообщили что такое ES6.

Хорошо, но что мне теперь делать? Все переписывать?

Нет, необязательно.
Один из вариантов (другие, признаюсь, поленился искать) это установка babel и затем компиляция ES6 в ES5.

npm install gulp-babel babel-preset-es2015

Обновляем наш код:

var babel  = require('gulp-babel');

gulp.task('js', () => {
  return gulp.src([
      'app/js/app.js',
      'app/js/controllers/addUserCtrl.js'
    ])
    .pipe(babel({presets: ['es2015']})) // <= добавили эту строку
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js/'));
});

Супер. Только я хотел чтобы браузер читал es6 код, а не es5.
Но и на том спасибо.

Все статьи