В общем, очередная секретная разработка для ускорения процесса создания сайтов.
Обычно для верстки я использовал десктопный препроцессор 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'.