- Препроцессор SCSS
- Autoprefixer
- Простой шаблонизатор для HTML
- Browser Sync (Livereload)
- Генератор спрайтов
- Минификация ресурсов
- Сжатие графики
Установить NodeJS
Плагин для редактора Editorconfig
Склонировать проект
В консоле перейти в папку с проектом и установить зависимости
npm install
npm install -g gulp-cli (если не установлен)gulp - Запуск проекта для разработки, сервер и слежение за файлами
gulp build - сборка проекта для заливки на продакшн
gulp sprite - сборка спрайта
start-frontend-project/
├── /build/ # Результат сборки. (Никогда не редактируется).
├── /node_modules/ # Node modules. (Никогда не редактируется).
├── /src/ # Исходные файлы.
│ ├── /_include/ # HTML разметка которая вставляется в другие файлы.
│ ├── /fonts/ # Шрифты.
│ ├── /images/ # Исходные изображения.
│ │ └── /sprite/ # Изображения для спрайтов.
│ ├── /scripts/ # Скрипты проекта.
│ ├── /sass/ # Структуру папки смотрите ниже.
└── .editorconfig # Настройка редактора.
└── .gitignore
└── gulpfile.js # Конфигурация для Gulp.
└── package.json # Пакеты для NPM.
└── projectConfig.json # Настройки и зависимости проекта.
sass/
├── /block/ # Стили для блоков.
├── /elements/ # Стили для элементов.
├── /pages/ # Стили для страниц.
└── _base.scss # Базовые стили. (Box sizing).
└── _mixins.scss # Миксины.
└── _sprite.scss # Спрайты. (Генерируется генератором спрайтов).
└── _typography.scss # Типографика проекта.
└── _variables.scss # Переменные.
└── main.scss # Компилируемый файл.
В этом файле можно добавить JS и CSS файлы в проект установленные через NPM и не только.
ВНИМАНИЕ! Это JSON. Это строгий синтаксис, у последнего элемента в любом контексте не должно быть запятой в конце строки.