Современная Frontend разработка предполагает использование препроцессора стилей SCSS или LESS, препроцессора и шаблонизатора HTML — Pug, сжатие изображение, JS и CSS файлов, в целях оптимизации загрузки веб-страниц и многоe многое другое. Чтобы упросить этот процесс, мы предлагаем вам воспользоваться сборкой проектов Gulp 4, которую постоянно совершенствует Андрей Горохов. Ниже будут представлены ссылки на скачивание, а пока пройдемся по основным моментам: описанию и установке.

 

 

Сборщик проектов Gulp

Gulp — это сборщик проектов, инструмент для автоматизации задач, которые описаны выше. Он поможет вам ускорить вашу работу и грамотно подготовить проект к релизу.

Скачать сборку можно с репозитория Github или через командную строку Git. В дальнейшем вы сможете настроить её под свои задачи.

Что включает в себя сборка?

  • browser-sync — живая перезагрузка веб-страницы при внесении изменений в файлы вашего проекта. Одна из опций — tunnel, которая выдаёт вам ссылку, чтобы любой желающий смог посмотреть вашу работу (в обход хостинга);
  • gulp-autoprefixer — автоматически расставляет вендорные префиксы в CSS в соответствии с сервисом Can I Use;
  • gulp-babel — использование ES6 с Babel;
  • gulp-uglify — минификация JS-файлов;
  • gulp-pug — компиляция Pug в HTML;
  • gulp-sass — компиляция SCSS в CSS;
  • gulp-clean-css — минификация CSS-файлов;
  • gulp-sourcemaps — карта стилей;
  • gulp-rename — переименование файлов, добавление суффиксов и префиксов (например, добавление суффикса .min к минифицированным файлам);
  • gulp-imagemin — сжатие изображений PNG, JPG, GIF и SVG;
  • imagemin-pngquant — дополнение к gulp-imagemin для работы с PNG-изображениями;
  • imagemin-jpeg-recompress — дополнение к gulp-imagemin для работы с JPG-изображениями;
  • gulp-favicons — генератор фавиконок для вашего проекта;
  • gulp-iconfont — генератор иконочного шрифта из SVG-изображений;
  • gulp-iconfont-css — генератор стилей для иконочного шрифта;
  • gulp-replace — замена строк;
  • gulp-newer — дополнительный плагин к gulp-imagemin, позволяет сжимать только новые изображения;
  • gulp-plumber — оповещения в командной строке (например, ошибки в Sass/SCSS);
  • gulp-debug — отладка в терминале;
  • gulp-watch — отслеживание изменений в ваших файлах проекта.

Как пользоваться?

Установите один из менеджеров пакетов (на выбор): NodeJS / Yarn.

NodeJS — это серверная платформа для работы с JavaScript через движок V8. JavaScript выполняет действие на стороне клиента, а Node — на сервере. С помощью Node можно писать полноценные приложения. Node умеет работать с внешними библиотеками, вызывать команды из кода на JavaScript и выполнять роль веб-сервера.

Yarn — это современная альтернатива npm. Yarn работает с тем же файлом package.json и так же скачивает необходимые модули в папку node_modules, но делает это намного быстрее.

Далее, используя cmd в Windows или Терминал Linux/macOS, проделайте следующие шаги:

  • Установите gulp глобально: npm i --global gulp-cli (если вы работаете с npm) или yarn global add gulp-cli (если вы работаете с yarn);
  • Перейдите в скачанную папку со сборкой: cd gulppack-pug;
  • Введите команду, которая скачает необходимые компоненты для корректной работы нашей сборки, указанные в файле package.jsonnpm i (если вы работаете с npm) либо введите команду yarn (если вы работаете с yarn);
  • Введите последнюю команду: gulp.

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером и работающим browser-sync. Теперь если вы внесёте изменения в файлы .pug.scss.js, браузер сам перезагрузит веб-страницу, а Gulp заново соберёт ваш проект в папке dest.

Если нужна работа с SCSS (без Pug)

Воспользуйтесь этой сборкой.

Если в Windows возникает ошибка с тем, что команда gulp не найдена

Модули npm, такие как gulp, не установлены в путях. Таким образом они не обнаруживаются при их запуске в командной строке.

  • Компьютер — Свойства — Защита системы — Дополнительно — Переменные среды;
  • В разделе Переменные среды выберите переменную среды PATH. Нажмите Изменить. Если переменной PATH не существует, нажмите Создать;
  • в имени переменной укажите NODE_PATH;
  • в значении переменной укажите %AppData%\npm или %AppData%\npm\node_modules;
  • закройте командную строку и попробуйте ещё раз.

 

 

 

Данная сборка постоянно дорабатывается и улучшается, поэтому если у вас есть предложения, то пишите в наш телеграм чат. Там вы обязательно найдете автора сборки Андрея Горохова.