Gulp

Введение

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач
(например, минификации, тестирования, объединения файлов), написанный на
языке программирования JavaScript.

Программное обеспечение использует
командную строку для запуска задач, определённых в файле Gulpfile.

Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики.
Распространяется через менеджер пакетов

NPM

под MIT лицензией.

Если Вы будете копировать код с этой страницы — имейте в виду, что я ставлю кое-где лишние
проблелы — исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.

Это основная статья об использовании Gulp.
В данный момент Вы можете помимо этой прочитать также статьи:

	Как скопировать папку с помощью Gulp
	Объединить и сжать несколько css файлов в один
	Как отправить файлы по ftp с помощью Gulp
	Gulp series
	Обработка только изменённых файлов с помощью gulp.watch().on(‘change’)

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json.

Предположим что, у вас есть новый проект в папке project1. Перейдите в каталог и инициализируйте его с помощью npm:

cd project1
npm init

Затем нажмите «Return», чтобы принять значения по умолчанию. Файл package.json, в котором хранятся параметры конфигурации npm, будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules. Нужно добавить их в свой файл .gitignore, чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install, чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

• html ‒ исходные файлы и шаблоны HTML;
• images ‒ оригинальные несжатые изображения;
• js – предварительно обработанные файлы скриптов;
• css – предварительно обработанные файлы Sass (.scss)

Папка build: скомпилированные/обработанные файлы

Когда понадобится, Gulp создаст файлы и подпапки:

• html ‒ скомпилированные статические файлы HTML;
• images ‒ сжатые изображения;
• js ‒ единственный объединенный и минифицированный файл JavaScript;
• css – единственный скомпилированный и минифицированный файл CSS.

Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:

mkdir -p src/{html,images,js,scss}

Issues

If you have a feature request/question how Sass works/concerns on how your Sass gets compiled/errors in your compiling, it’s likely a Dart Sass or LibSass issue and you should file your issue with one of those projects.

If you’re having problems with the options you’re passing in, it’s likely a Dart Sass or Node Sass issue and you should file your issue with one of those projects.

We may, in the course of resolving issues, direct you to one of these other projects. If we do so, please follow up by searching that project’s issue queue (both open and closed) for your problem and, if it doesn’t exist, filing an issue with them.

Use latest JavaScript version in your gulpfile

Most new versions of node support most features that Babel provides, except the / syntax. When only that syntax is desired, rename to , install the module, and skip the Babel portion below.

Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your to .

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

Then create a .babelrc file with the preset configuration.

{"presets""@babel/preset-env"}

And here’s the same sample from above written in ES2015+.

importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};exportconstclean=()=>del('assets');exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatchFiles(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}export{watchFilesaswatch};constbuild=gulp.series(clean,gulp.parallel(styles, scripts));exportdefaultbuild;

Default Tasks

By default, gulp-setup comes bundled with a variety of pre-made tasks.

gulp

The task will run a sequence of , , and , as you would usually do in gulp.

gulp build

By default, the build task will execute the task, after which it runs all the other tasks that provide a parameter.

gulp clean

This task will remove the existing build and dist folders.

gulp watch

The task will watch for changes and rebuild any task that provides a parameter. In addition to this, creates a , which will rebuild any file that depends on the one that got changed.

gulp lint

This task will run any task that ends with .

gulp html

Copies files to the build folder, then minifies them and outputs them in dist.

gulp css

Autoprefixes files and outputs them to the build folder, then minifies them and outputs them in dist.

gulp sass

Compiles and autoprefixes and files and outputs them to the build folder, then minifies them and outputs them in dist.

_{This task makes use of the , meaning that any changes on a partial will trigger a rebuild on the parent files.}

gulp stylus

Compiles and autoprefixes files and outputs them to the build folder, then minifies them and outputs them in dist. Stylus instance also provides functionality.

_{This task makes use of the , meaning that any changes on a partial will trigger a rebuild on the parent files.}

gulp javascript

Compiles ES6 files and outputs them to the build folder, then minifies them and outputs them in dist. The task can use either or to process and bundle the files, specified using the parameter (as seen in the configuration example below).

_{This task makes use of the , meaning that any changes on a partial will trigger a rebuild on the parent files.}

gulp coffeescript

Compiles files and outputs them to the build folder, then minifies them and outputs them in dist. Just like in the task, you can use either or to bundle the files.

_{This task makes use of the , meaning that any changes on a partial will trigger a rebuild on the parent files.}

gulp typescript

Compiles files and outputs them to the build folder, then minifies them and outputs them in dist. Just like in the task, you can use either or to bundle the files.

_{This task makes use of the , meaning that any changes on a partial will trigger a rebuild on the parent files.}

gulp images

Optimizes , , , and files and outputs them to the build and dist folders.

gulp fonts

Copies , , , , and files to the build and dist folders.

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

Давайте создадим задачу Gulp для минимизации одного из наших файлов JavaScript. Создайте файл с именем gulpfile.js. В нём будут определяться ваши задачи, которые запускаются с помощью команды gulp.

Добавьте следующие команды в ваш файл gulpfile.js:

Установите gulp-uglify через npm выполнив npm install —save-dev gulp-uglify, а затем запустите задачу через gulp minify. Предположим, у вас есть файл с именем app.js в папке js, новый app.js будет создан в папке build и содержать сжатую версию js/app.js.

Что на самом деле здесь происходит?

Мы делаем несколько вещей в нашем файле gulpfile.js. Вначале мы загружаем модули gulp и gulp-uglify:

Затем определяем задачу с именем minify, которая при запуске вызывает функцию, заданную в качестве второго аргумента:

В конце, и это самое сложное, мы определяем, что наша задача должна делать:

Если вы не знакомы с потоками, а большинство фронтенд-разработчиков с ними не знакомы, то код выше ничего вам не скажет.

Шаг 1: установите Node.js

Node.js можно загрузить для Windows, macOS и Linux с nodejs.org/download/. Доступны различные варианты платформы для установки из бинарных файлов, модульных сборщиков и Docker-образов.

Примечание: Node.js и Gulp работают в Windows, но некоторые плагины могут работать некорректно, если они зависят от собственных бинарных файлов Linux. Одним из вариантов решения проблемы в Windows 10 является подсистема Windows для Linux.

После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:

node -v

Вскоре вы станете активно использовать npm – менеджер пакетов Node.js, который необходим для установки модулей. Узнайте номер его версии:

npm –v

Примечание: модули Node.js можно устанавливать глобально, чтобы они были доступны во всей ОС. Но большинство пользователей не будут иметь права на запись в глобальные библиотеки, если у команд npm не будет префикса sudo. Существует несколько вариантов, как исправить разрешения npm. Но можно изменить каталог по умолчанию. Например, в Ubuntu/Debian:

cd ~
  mkdir .node_modules_global
  npm config set prefix=$HOME/.node_modules_global
  npm install npm -g

Затем добавьте следующую строку в конце ~/.bashrc:

export PATH="$HOME/.node_modules_global/bin:$PATH"

Снова обновите:

source ~/.bashrc

Дополнительные полезные плагины для Gulp

Проект, что мы создали выше это самый простейший набор плагинов Gulp. Его функциональность можно значительно расширить, установив и настроив дополнительные плагины. Я составил список, которые сам использую в своих проектах.

Plumber — дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

Sourcemaps — создает карту подключений файлов css и js. Обычно в подобных проектах файлы стилей и скриптов делят на несколько частей для удобства. Так вот, чтобы потом ориентироваться в каком файле и в какой строке находится та или иная запись как раз и нужна карта подключений. 

Tinypng — сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite — сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger — объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

BrowserSync — перезагрузка браузера. Очень полезное дополнение, т.к. не нужно тратить время на обновление браузера, плагин делает это автоматически при сохранении измененных файлов. В плагине используется встроенный простенький локальный-сервер.

Spritesmith — создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf — очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии — старая и новая.

На этом я завершаю данную статью, которая и так получилась достаточно объемной. Я сам очень долго изучал эту тему, а инструкции в интернете в основном являлись переводами зарубежных статей, в которых описывалось все скромно.

Конечно я буду еще писать на тему Gulp, т.к. сам постоянно развиваюсь и стараюсь делать свои проекты как можно проще и быстрее. Обязательно поделюсь своей сборкой в Github.

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

works great inside lazypipe

Lazypipe assumes that all function parameters are static, gulp-if arguments need to be instantiated inside each lazypipe. This difference can be easily solved by passing a function on the lazypipe step

var gulpif =require('gulp-if');var jshint =require('gulp-jshint');var uglify =require('gulp-uglify');var lazypipe =require('lazypipe');var compressing =false;var jsChannel =lazypipe().pipe(jshint).pipe(jshint.reporter).pipe(jshint.reporter,'fail').pipe(function(){returngulpif(compressing,uglify());});gulp.task('scripts',function(){returngulp.src(paths.scripts.src).pipe(jsChannel()).pipe(gulp.dest(paths.scripts.dest));});

Release History

• 1.5.0 — Update webpack to 1.9.x (@nmccready). Update other dependencies.
• 1.4.0 — Update webpack to 1.8.x (@Zolmeister).
• 1.3.2 — Fix another place with ? in name (@raphaelluchini).
• 1.3.1 — Fix for paths with ? in their name (@raphaelluchini).
• 1.3.0 — Updating to webpack >= 1.7.
• 1.2.0 — Updating to webpack >= 1.5, vinyl >= 0.4, memory-fs >= 0.2.
• 1.1.2 — Fixes to default stats for logging (@mdreizin).
• 1.1.1 — Add additional stats to default logging (@mdreizin).
• 1.1.0 — Exposes internal webpack if asked via
• 1.0.0 — Support named chunks pipe’d in for multiple entry points.
• 0.4.1 — Fixed regression for multiple entry point support.
• 0.4.0 — Display an error message if there are no input files (@3onyc). Add message on why task is not finishing, Add ability to track compilation progress, Add ability to configure stats output via options (@kompot). Bump webpack version (@koistya).
• 0.3.0 — Update deps (@kompot). Fixes to determining entry (@btipling and @abergs).
• 0.2.0 — Support for mode (@ampedandwired).
• 0.1.0 — Initial release

Use latest JavaScript version in your gulpfile

Most new versions of node support most features that Babel provides, except the / syntax. When only that syntax is desired, rename to , install the module, and skip the Babel portion below.

Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your to .

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

Then create a .babelrc file with the preset configuration.

{"presets""@babel/preset-env"}

And here’s the same sample from above written in ES2015+.

importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};exportconstclean=()=>del('assets');exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatchFiles(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}export{watchFilesaswatch};constbuild=gulp.series(clean,gulp.parallel(styles, scripts));exportdefaultbuild;

Incremental Builds

You can filter out unchanged files between runs of a task using
the function’s option and :

constpaths={...  images{    src'src/images/**/*.{jpg,jpeg,png}',    dest'build/img/'}}functionimages(){returngulp.src(paths.images.src,{sincegulp.lastRun(images)}).pipe(imagemin({optimizationLevel5})).pipe(gulp.dest(paths.images.dest));}functionwatch(){gulp.watch(paths.images.src, images);}

Task run times are saved in memory and are lost when gulp exits. It will only
save time during the task when running the task
for a second time.

If you want to compare modification time between files instead, we recommend these plugins:

functionimages(){var dest ='build/img';returngulp.src(paths.images).pipe(newer(dest)).pipe(imagemin({optimizationLevel5})).pipe(gulp.dest(dest));}

If you can’t simply filter out unchanged files, but need them in a later phase
of the stream, we recommend these plugins:

functionscripts(){returngulp.src(scriptsGlob).pipe(cache('scripts')).pipe(header('(function () {')).pipe(footer('})();')).pipe(remember('scripts')).pipe(concat('app.js')).pipe(gulp.dest('public/'))}

Установка Gulp

Установку Gulp я буду показывать на примере ОС Windows 10 x64 последней сборки, так как я работаю именно в данной системе.

Первым делом нам необходимо установить node.js. Данный пакет превращает клиентский язык javaScript в серверный. Для тех, кто не знает язык javaScript интерпретирует браузер пользователя. Кстати, Gulp создан на языке javaScript и если вы знакомы с данным языком, то освоить его вам будет намного легче.

Для установки node.js необходимо скачать инсталлятор с официального сайта. Качаем последнюю стабильную версию. Пакет устанавливается как обычная программа и ничего сложного в этом нет.

После установки node.js можно проверить правильно ли все установилось. Открываем консольное окно (командная строка) — в ОС Windows это комбинация клавиш . Вводим команду:

Если все правильно установили в ответ вы увидите версию установленного пакета.

Все, можно приступать к установке Gulp. 

Пишем команду для установки Gulp:

Давайте разберем, что значит данная запись:

• npm — говорит о том, что мы запускаем пакет менеджер, который установит Gulp;
• i — это сокращенная запись install, т.е. установить;
• gulp — имя устанавливаемого пакета;
• -g — данный флаг говорит о том, что мы устанавливаем Gulp глобально в систему. Без данного ключа gulp установится в ту папку, из которой запускается команда. Так что имейте это ввиду.

Установка не занимает много времени, примерно 1-2 мин. После завершения работы установщика галп можно проверить корректность установки, также, как и node.js:

Если все правильно, то выдаст версию установленного галп.

Создание проекта

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу «Shift» и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем «Открываем окно PowerShell здесь«. Данный пункт может называться и по другому — «Открыть окно команд«.

Запускаем инициализацию проекта командой:

Заполняем необходимые поля проекта по шагам и желательно латиницей. После ввода названия жмем Enter и переходим с следующему шагу.

• package-name: вводим название проекта маленькими буквами
• version: оставляем по умолчанию — 1.0.0
• description: вводим описание проекта, например, My first gulp project.
• entry point: (index.js), test command:, git repository:, keywords: — данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
• author: впишите имя автора, я ввел Zaur Magomedov
• license: оставляем по умолчанию
• Is this ok? — вводим «yes» и жмем Enter поле чего в папке нашего проекта появится файл package.json. 

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

флаг —save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

При установке gulp название пакета и его версия автоматически пропишутся в файле package.json. Вообще такой подход позволяет сохранять файл package.json со всеми установленными пакетами (зависимости), а при разворачивании нового проекта достаточно скопировать данный файл и запустить команду установки в консоли проекта — и все пакеты в проект установятся автоматически. Сейчас может вам будет не совсем понятно, но дальше я уверен вы поймете.

И так, после установки gulp в папке проекта должна появиться папка node_modules,  она содержит в себе необходимые зависимости. Также все новые установленные зависимости, прописываемые в package.json будут складываться именно в данную папку. Так что ничего не трогайте в ней и не удаляйте. Не пугайтесь если увидите в ней много файлов и папок.

Давайте откроем файл package.json реактором кода и взглянем на его содержимое.

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке «devDependencies» указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

Плагины

Вместе с Gulp вы можете использовать ряд плагинов — более 600 на деле. Вы найдёте их список на странице плагинов, либо путём поиска gulpplugin в npm. Некоторые плагины помечены «gulpfriendly»; это не плагины, но они предназначены для работы с Gulp. Учтите, что при поиске непосредственно в npm, вы не увидите плагины из чёрного списка (прокрутите страницу с плагинами вниз и увидите больше).

Большинство плагинов довольно просты в использовании, имеют хорошую документацию и запускаются аналогичным образом (через поток файловых объектов). Они, как правило, модифицируют файлы (хотя некоторые, вроде валидаторов, нет) и возвращают новые файлы, которые передаются в следующий плагин.

Давайте расширим уже упомянутую задачу js:

Мы используем три плагина: gulp-jshint, gulp-uglify и gulp-concat. Вы можете увидеть в файлах README для плагинов, что их довольно легко использовать. Доступны некоторые настройки, но по умолчанию, как правило, всё хорошо.

Вы, возможно, заметили, что плагин JSHint вызывается дважды. Потому что первая строка вызывает JSHint для файлов, которые только присоединяют свойство jshint к файловым объектам без какого-либо вывода. Вы можете прочитать свойство jshint самостоятельно или передать его в jshint.reporter по умолчанию или в другой reporter, такой как jshint-stylish.

Два других плагина понятнее: функция uglify() минимизирует код, а функция concat(‘app.js’) объединяет все файлы в один с именем app.js.

Отслеживание файлов

Gulp имеет возможность следить за изменением файлов и выполнять задачу или задачи при обнаружении изменений. Эта функция удивительно полезна (для меня, наверное, одна из самых полезных в Gulp). Вы можете сохранить Less-файл, а Gulp превратит его в CSS и обновит браузер без каких-либо действий с вашей стороны.

Для слежения за файлом или файлами используйте функцию gulp.watch(), которая принимает шаблон файлов или их массив (такой как gulp.src()), либо массив задач для их запуска или выполнения функции обратного вызова.

Предположим, что у нас есть задача build, она превращает наши файлы шаблонов в HTML и мы хотим определить задачу watch, которая отслеживает изменение шаблонов и запускает задачу для преобразования их в HTML. Мы можем использовать функцию watch следующим образом:

Теперь при изменении файла шаблона будет запущена задача build, которая создаст HTML.

Вы также можете указать для watch функцию обратного вызова вместо массива задач. В этом случае функция получает объект event содержащий информацию о событии, которое вызвало функцию:

Другой отличительной особенностью gulp.watch() является то, что она возвращает watcher. Используйте его для прослушивания дополнительных событий или для добавления файлов в watch. Например, чтобы одновременно запустить список задач и вызвать функцию, вы можете добавить слушателя в событие change при возвращении watcher:

В дополнение к событию change вы можете прослушивать ряд других событий:

• end

  Срабатывает, когда watcher завершается (это означает, что задачи и функции обратного вызова не будут больше вызываться при изменении файлов).

• error

  Срабатывает, когда происходит ошибка.

• ready

  Срабатывает, когда файлы были найдены и готовы к отслеживанию.

• nomatch

  Срабатывает, когда запросу не соответствует ни один файл.

Объект watcher также содержит некоторые методы, которые можно вызывать:

• watcher.end()

  Останавливает watcher (при этом задачи или функции обратных вызовов не будут больше вызываться).

• watcher.files()

  Возвращает список файлов за которыми следит watcher.

• watcher.add(glob)
  Добавляет файлы в watcher, которые соответствуют указанному шаблону glob (также принимает необязательную функцию обратного вызова в качестве второго аргумента).
• watcher.remove(filepath)
  Удаляет определённый файл из watcher.

Gulp

Шаг 7: Пожинаем плоды!

Другие плагины, которые могут быть полезны:

• gulp-load-plugins: загружает все модули плагинов Gulp автоматически;
• gulp-preprocess: простой препроцессор HTML и JavaScript;
• gulp-less: плагин препроцессора Less CSS;
• gulp-stylus: плагин препроцессора Stylus CSS;
• gulp-size: отображает размеры файлов;
• gulp-nodemon: использует nodemon для автоматического перезапуска приложений Node.js при их изменении.

Таски Gulp могут запускать любой JavaScript- код или модули Node.js. Они не обязательно должны быть плагинами. Например:

• browser-sync: автоматически перезагружает ресурсы, когда происходят изменения;
• del: удаляет файлы и папки (может очищать папку build в начале каждого запуска).

Преимущества Gulp:

• множество плагинов;
• конфигурация с использованием pipe легко читаема и понятна;
• js можно адаптировать для использования в других проектах;
• упрощает развертывание;

Полезные ссылки:

• домашняя страница Gulp;
• плагины Gulp;
• домашняя страница npm.

После применения описанных выше процессов к простому сайту его общий вес уменьшился более чем на 50%.

Что такое Gulp.js? Gulp – это отличный вариант для автоматического запуска заданий и упрощения процесса разработки.

LICENSE

(MIT License)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
«Software»), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Use last JavaScript version in your gulpfile

Node already supports a lot of ES2015, to avoid compatibility problem we suggest to install Babel and rename your as .

npm install --save-dev babel-register babel-preset-es2015

Then create a .babelrc file with the preset configuration.

{"presets""es2015"}

And here’s the same sample from above written in ES2015.

importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};exportconstclean=()=>del('assets');exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatchFiles(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}export{watchFilesaswatch};constclean=gulp.series(clean,gulp.parallel(styles, scripts));gulp.task('clean', clean);exportdefaultbuild;