Что есть в стартовом проекте

• Препроцессор 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

sass/
├── /block/                # Стили для блоков.
├── /elements/             # Стили для элементов.
├── /pages/                # Стили для страниц.
└── _base.scss             # Базовые стили. (Box sizing).
└── _mixins.scss           # Миксины.
└── _sprite.scss           # Спрайты. (Генерируется генератором спрайтов).
└── _typography.scss       # Типографика проекта.
└── _variables.scss        # Переменные.
└── main.scss              # Компилируемый файл.

projectConfig.json

В этом файле можно добавить JS и CSS файлы в проект установленные через NPM и не только.
ВНИМАНИЕ! Это JSON. Это строгий синтаксис, у последнего элемента в любом контексте не должно быть запятой в конце строки.

Полезные ссылки

Сборник ссылок