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

Относительно недавно я начала использовать в своих проектах новый стандарт JavaScript, ES6. В этой записи я расскажу, как настроить Gulp, чтобы внутри gulpfile тоже можно было писать на ES6.

Способ 1, с использованием Babel

Так как я занимаюсь в основном фронтендом, то для того, чтобы код, написанный на ES6, запускался в браузере, я использую Babel. Сборку проекта я делаю при помощи Gulp. Поэтому, можно обработать gulpfile при помощи Babel.

Для нового проекта установка будет выглядеть так:

  1. Инициализировать npm в папке проекта: npm init
  2. Установить для проекта Gulp: npm install --save-dev gulp и Babel: npm install --save-dev babel-core babel-preset-es2015
  3. В файле package.json (он появится после выполнения инициализации npm) добавить в раздел со скриптами команду для запуска Gulp:

    Благодаря этому, сборка запускается командой npm run gulp.
  4. Теперь надо создать в папке проекта файл .babelrc со следующим содержимым:

После этого можно создать gulpfile с названием gulpfile.babel.js, и написать в нем необходимые такси, например:

Babel позволяет использовать внутри gulpfile все новинки, появившиеся в ES6, в том числе модули.

Способ 2, с использованием новой версии Node.js

В Node.js версии 6, которая вышла всего несколько дней назад, 27 апреля, реализовано 93% возможностей ES6, что больше, чем в Babel. Это позволяет использовать новые возможности языка внутри gulpfile без дополнительных инструментов, что, как мне кажется, должно работать быстрее.

К сожалению, использование новых версий возможно не всегда, так как могут возникать конфликты с уже используемыми в проекте пакетами. Например, node-sass, и соответственно gulp-sass, пока не работают на nodejs 6.