Gulp for all projects
Система сборки для обычных и сложных проектов.
1. Запустите npm install чтобы установить все пакеты Gulp.
2. Запустите gulp watch (gulp) и вы можете уже начинать работу, папку app не нужно изменять
- Gulp-sass - Препроцессор Sass
- Gulp-sourcemaps - Для отслеживания изменений Sass файлов в браузере
- browser-Sync - Сервер с LiveReload (Автоматическое обновление страниц при изменении файлов)
- Gulp-concat - Конкатенация (объединение нескольких файлов)
- Gulp-uglifyJS - Сжатие js скриптов
- Gulp-cssnano - Сжатие css скриптов
- Gulp-rename - Переимнование файлов
- Gulp-csscomb - Форматирование css файлов в удобочитаемый вид
- Gulp-combine-mq - Для объединения media файлов css
- Gulp-html-beautify - Для форматирования HTML кода
- Gulp-file-include - Плагин для создания и внедрения компонентов в верстку
- Main-bower-files - Автоматический перенос только нужных скриптов из библиотек Bower
- Gulp-concat-css - Правильное объединения css файлов
- Gulp-useref - Для изменения путей к скриптам в HTML файлах
- Gulp-plumber - Отслеживание ошибок
- Gulp-autoprefixer - Автоматические префиксы для css через Sass компиляцию
- Gulp-cache - Кеш для изображений
- Imagemin-pngquant - Сжатие изображений.
- Gulp-imagemin - Сжатие изображений.
dev/ - Папка с файлами разработки
dev/sass/_vars - Переменные для Sass
dev/sass/_base - Стили которые не относятся к отдельным страницам (например header, footer)
dev/sass/bootstrap - Компиляция bootstrap 4
dev/sass/fonts - Подключение шрифтов
dev/html - Корневая папка со всеми страницами проекта
dev/html/components - Отдельные компоненты проекта (header,footer,nav)
dev/fonts - Шрифты проекта
dev/img - Изображения проекта
dev/js - Файлы js скриптов
dev/libs - Папка с библиотеками проекта
app/ - Папка продакшн (готовая верстка)
В своей разработке используйте в основном папку html для отдельных страниц, например если у вас есть page_1 и page_2 страницы то структура будет следующей:
--html
--page_1
--index.html
--main.sass
--media.sass
--vars.sass
--page_2
--index.html
--main.sass
--media.sass
vars.sass использовать нужно тогда когда нужно переопределить переменные в Sass
Если вы пишите стили для header,footer, стандартные стили для ссылок, список и.т.д. используйте папку Sass.
Перед началом работы некобходимо изменить gulpfile.js под себя (css-libs, scripts)