Настройка Gulp Babel

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

Содержание:

  1. Babel для Gulp;
    1. установка gulp-babel;
    2. настройка gulpfile.js;
    3. создание babelrc;
  2. gulp-terser;

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

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

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

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

Babel 7

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

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

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

const { src, dest, watch, series, parallel } = require('gulp');
const babel = require('gulp-babel');

function js() {
    return src([
        'app/assets/js/scripts.js'
    ])
    .pipe(babel({
        presets: ["@babel/preset-env"]
    }))
    .pipe(dest('build/assets/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