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

 

 

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

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

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

Установка

Установите Yarn.

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

  • скачайте сборку: git clone https://github.com/andreyalexeich/gulppack-scss.git;
  • установите gulp глобально: yarn global add gulp-cli;
  • перейдите в скачанную папку со сборкой: cd gulppack-scss;
  • введите команду, которая скачает необходимые компоненты для корректной работы нашей сборки, указанные в файле package.json: yarn;
  • введите команду: yarn run dev (режим разработки);
  • чтобы окончательно завершить проект, введите команду yarn run build.

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером и работающим browser-sync.

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

  • gulp-if — запуск заданий только тогда, когда это нужно;
  • browser-sync — живая перезагрузка веб-страницы при внесении изменений в файлы вашего проекта;
  • gulp-autoprefixer — автоматически расставляет вендорные префиксы в CSS в соответствии с сервисом Can I Use;
  • gulp-babel — использование ES6 с Babel;
  • gulp-uglify — минификация JS-файлов;
  • gulp-concat — объединение файлов;
  • gulp-sass — компиляция SCSS в CSS;
  • gulp-clean-css — минификация CSS-файлов;
  • gulp-sourcemaps — карта стилей;
  • gulp-rename — переименование файлов, добавление суффиксов и префиксов (например, добавление суффикса .min к минифицированным файлам);
  • gulp-imagemin — сжатие изображений PNG, JPG, GIF и SVG (включая дополнительные плагины для оптимизации);
  • gulp-favicons — генератор фавиконок для вашего проекта;
  • gulp-svg-sprites — создание SVG-спрайтов;
  • gulp-replace — замена строк;
  • gulp-rigger — позволяет вставлять содержимое из отдельных файлов в основной;
  • gulp-plumber — оповещения в командной строке (например, ошибки в SCSS/Sass);
  • gulp-debug — отладка в терминале;
  • gulp-watch — отслеживание изменений в ваших файлах проекта;
  • gulp-clean — удаление файлов и папок;
  • yargs — получение аргументов командной строки в Node.js.

Режим разработки

Исходники

  • HTML-файлы находятся в папке src/views
    • компоненты (например, спрайты или формы) к HTML-файлам находятся в src/views/components
    • остальные компоненты (например, шапка, футер) могут находиться в src/views/layouts
  • SCSS-файлы находятся в папке src/styles
    • основные компоненты (типография, переменные, миксины) к SCSS-файлам находятся в src/styles/base
    • компоненты (например, спрайты, кнопки) находятся в src/styles/components
    • остальные компоненты (от других разработчиков) находятся в src/styles/vendor
  • JS-файлы находятся в папке src/js
  • Изображения находятся в папке src/img
    • векторные изображения для создания спрайтов находятся в src/img/icons/svg
    • единичное изображение для генерации фавиконок находится в src/img/icons/favicon.png (данное изображение может иметь формат .jpg.png или .gif)

Сборка проекта в режиме разработки

yarn run dev

Окончательная сборка

yarn run build

Готовые файлы

  • HTML-файлы находятся в папке dist/;
  • минифицированные CSS-файлы находятся в папке dist/styles;
  • минифицированные JS-файлы с поддержкой ES6 находятся в папке dist/js;
  • сжатые изображения находятся в папке dist/img.

Bower?

Вместо Bower используйте yarn или npm. Подробнее тут.

Нужен Pug + SCSS?

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

 

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