Настройка Gulp Babel

Что такое Babel, зачем он нужен, как установить gulp-babel для Gulp, настроить и начать использовать в своих проектах.

Babel - это компилятор JavaScript. Содержит в себе набор инструментов, позволяющих преобразовывать код ECMAScript 2015 и выше в совместимую версию JavaScript для более старых браузеров.

Использование Babel для Gulp

Установка и настройка Babel для Gulp

1. Установка gulp-babel в проект

Babel 6

npm install gulp-babel @babel/preset-env --save-dev

Babel 7

npm install gulp-babel@next @babel/core @babel/preset-env --save-dev

2. Настройка gulpfile.js

.pipe(babel()) - используйте перед конкатенацией и минификацией

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

gulp.task('js', function (){
    return gulp.src('app/scripts.js')
        .pipe(babel())
        .pipe(gulp.dest('dist/js'));
});

3. Создание конфигурационного файла .babelrc

Необходимо создать файл .babelrc со следующим содержимым:

{
  "presets": ["@babel/preset-env"]
}

Babel для Gulp успешно установлен и настроен, теперь у вас есть возможность использования ES6+ синтаксиса в своих проектах на Gulp.

Использование gulp-terser

Возможно, вы решили воспользоваться gulp-babel, из-за того что вам порядком надоели ошибки: GulpUglifyError: unable to minify JavaScript :

  • Caused by: SyntaxError: Unexpected token: keyword «const»
  • Caused by: SyntaxError: Invalid assignment
  • Caused by: SyntaxError: Unexpected token: name «», expected: punc «;»

Тогда вы можете воспользоваться плагином gulp-terser с поддержкой ECMAScript 2015. ссылка

Данный пакет сжимает (минифицирует) ES6+ код.

Статьи про Gulp:

  1. Что такое Gulp, зачем он нужен и как его использовать
  2. Автоматическое обновление страницы с помощью browser-sync для Gulp
  3. Использование SASS в Gulp
  4. Моментальная загрузка сайта на хостинг и синхронизация файлов - gulp-rsync
admin
04/11/2019 21:27