Препроцессор SCSS-to-CSS с помощью GULP4

В общем, очередная секретная разработка для ускорения процесса создания сайтов. 

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

Мои предыдущие проекты с использованием Gulp 4 я использую почти ежедневно, надеюсь и вам пригодятся:

• Проект на Gulp 4 — Gulp – подробное руководство.
• Сжатие и оптимизация изображений для Web — Оптимизация изображений без сторонних приложений с помощью Gulp 4.

Итак, создаем свой локальный препроцессор на основе Gulp 4

Репозиторий — https://github.com/DenisShapkun/prepros.

BUILD CSS FROM SCSS с использованием GULP 4

Клонируем проект

git clone git@github.com:DenisShapkun/prepros.git

Заходим в каталог с проектом

cd prepros

После клонирования запускаем для установки всех пакетов

$ npm install

Содержимое файла gulpfile.js:

Задача browser-sync для синхронизации с браузером.

Задача html-reload включается внутри задачи watch для отслеживания изменений в файлах .html для последующей синхронизации с браузером.

Задача build компилирует стили из scss в css, сжимает, переименовывает и загружает полученные файлы .min.css в папку 'assets/css'.

Задача watch отслеживает изменения в указанных файлах и сразу компилирует .min.css после каждого изменения в *.scss, но без использования 'browser-sync' не будет синхронизации в браузере. Задача 'watch' используется в задаче 'live'.

Задача live выполняет поочередно задачи build, browser-sync, 'watch' и результатом будет запуск в браузере http://localhost:3000/ с синхронизацией и отслеживанием изменений в формате Live Reload.

Задача default запускает задачу build и результатом будет скомпилированный файл .min.css в папке 'assets/css'.

Для разработки с использованием Live Reload запускаем для синхронизации браузера с изменениями в коде:

gulp live

Для автоматической компиляции после изменений в файлах без Live Reload запускаем:

gulp watch

Для компиляции, если не использовались предыдущие команды:

gulp build

или просто

gulp

И получаем скомпилированные файлы .min.css в папке 'assets/css'.