Автоматизация задач, сжатие и конвертирование изображений, верстка с live-сервером, удобная и быстрая разработка с помощью шаблонизатора pug, препроцессора sass/scss, генерирование отчетов lighthouse. Форматирование, валидация и оптимизация кода.
- Установить NodeJS. nodejs.org
- Установить переменную окружения PATH для NodeJS.
- Установить gulp глобально:
npm install --global gulp-cli. gulpjs.com - Установить переменную окружения PATH для gulp.
- Установить gulp-worker через менеджер пакетов npm, либо клонировать репозиторий и выполнить
npm installв папке с проектом.
Если NodeJS был установлен, но в консоле он недоступен, необходимо установить переменную окружения PATH.
Если windows ругается (ExecutionPolicy), нужно выполнить в консоли с правами администратора Set-ExecutionPolicy Unrestricted -Scope CurrentUser.
Пример использования:
gulp server
[20:26:16] Using gulpfile ~/www/dev/gulp/gulpfile.js
[20:26:16] Starting 'server'...
[Browsersync] Access URLs:
----------------------------
Local: http://localhost:3000
----------------------------
UI: http://localhost:3001
----------------------------
[Browsersync] Serving files from: /www/dev/gulp/builds- Открываем папку с установленным gulp-worker
- Открываем в этой папке терминал (powershell, gitbash и т.п.). Для windows лучше gitbash - он удобнее
- Копируем нужные файлы в папку src. Например картинки в src/images, css файлы в src/css, javascript в src/js.
- Запускаем в терминале нужную задачу.
Например для сжатия картинок через сервис tinypng:
- Если еще нет api-key для этого сервиса, то заходим на любой tempmail, копируем email и регистрируемся на tinypng под этим адрессом, так как лимит 500 изобр. в месяц. После подтв. регистрации находим там свой api-key, включаем его и копируем. Далее вставляем его в конфиг gulp-worker: gulpfile.js/config.js -> API_KEY_TINYPNG = "СЮДА ПИШЕМ СВОЙ API-KEY"
- Копируем в папку src/images изображения
- Открываем терминал в корневой папки gulp-worker, где package.json лежит.
- Вводим команду
gulp tinypng - Появляется в корневой папке директория build, в которой лежит папка images с оптимизированными изображениями. Полный список тасков лежит в файле gulpfile.js/index.js. Также в этой документации привиденно описание всех команд.
Все таски хранятся в "gulpfile.js/tasks". Если нужно изменить параметры для какой-то задачи, находим нужный файл в этой директории и изменяем его под свои нужды. Настройки gulp-плагинов легко найти на сайте npm. Также через консоль можно посмотреть список всех доступных задач: gulp --tasks-simple.
Самые важные параметры вынесены в отдельный файл "gulpfile.js/config.js". В нём содержатся пути до файлов в дириктории src и build, а также API-KEY для tinypng и некоторые другие. Более детальная настройка производится внутри самой таски. Файл concat-order.config - здесь указывать очередность конкатенации файлов.
Документация на стадии разработки, поэтому в ней могут быть ошибки и недочеты.