Относительно недавно я начала использовать в своих проектах новый стандарт JavaScript, ES6. В этой записи я расскажу, как настроить Gulp, чтобы внутри gulpfile тоже можно было писать на ES6.
Способ 1, с использованием Babel
Так как я занимаюсь в основном фронтендом, то для того, чтобы код, написанный на ES6, запускался в браузере, я использую Babel. Сборку проекта я делаю при помощи Gulp. Поэтому, можно обработать gulpfile при помощи Babel.
Для нового проекта установка будет выглядеть так:
- Инициализировать npm в папке проекта:
npm init
- Установить для проекта Gulp:
npm install --save-dev gulp
и Babel:npm install --save-dev babel-core babel-preset-es2015
- В файле package.json (он появится после выполнения инициализации npm) добавить в раздел со скриптами команду для запуска Gulp:
123"scripts": {"gulp": "./node_modules/gulp/bin/gulp.js"}
Благодаря этому, сборка запускается командойnpm run gulp
. - Теперь надо создать в папке проекта файл
.babelrc
со следующим содержимым:
123{"presets": ["es2015"]}
После этого можно создать gulpfile с названием gulpfile.babel.js
, и написать в нем необходимые такси, например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
'use strict'; import gulp from 'gulp'; import sass from 'gulp-sass'; const dirs = { src: 'src', dest: 'build' }; const sassPaths = { src: `${dirs.src}/app.scss`, dest: `${dirs.dest}/styles/` }; gulp.task('styles', () => { return gulp.src(paths.src) .pipe(sass.sync().on('error', plugins.sass.logError)) .pipe(gulp.dest(paths.dest)); }); |
Babel позволяет использовать внутри gulpfile все новинки, появившиеся в ES6, в том числе модули.
Способ 2, с использованием новой версии Node.js
В Node.js версии 6, которая вышла всего несколько дней назад, 27 апреля, реализовано 93% возможностей ES6, что больше, чем в Babel. Это позволяет использовать новые возможности языка внутри gulpfile без дополнительных инструментов, что, как мне кажется, должно работать быстрее.
К сожалению, использование новых версий возможно не всегда, так как могут возникать конфликты с уже используемыми в проекте пакетами. Например, node-sass, и соответственно gulp-sass, пока не работают на nodejs 6.