GULP сборка

Основные возможности и используемые технологии

• Система сборки Gulp
• Оптимизация изображений.
• Генерация SVG-спрайтов.
• Шаблонизация с помощью Pug.
• CSS-препроцессор SCSS и Autoprefixer.
• Проверка кода линтерами (pug-lint, stylelint, ESLint).
• Browsersync, автоматическое обновление страницы при разработке.
• Множество дополнительных параметров сборки.

Начало работы

Для установки:

npm install

После установки пакетов можно запускать 'gulp'.

Для режима разработки:

npm run dev

Сборка прод версии:

npm run build:prod

В сборке используется deploy для github pages. Для его настройки в фале package.json в url нужно прописать ваш репозиторий.

"repository": {
		"type": "git",
		"url": "git+https://github.com/USER/PROJECT.git"
	},

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

Gulp-задачи

• dev — основная задача, запускает watch. Режим разработки.
• build:prod — сборка всех файлов для продакшена, запускает задачи build --prod.
• deploy — сборка всех файлов для продакшена. Затем деплоит в GHP, запускает задачи gh-pages.
• squoosh — оптимизирует изображения в папке build/assets/images.

Документация

1. Структура проекта
2. Работа с PUG(JADE)
3. Работа с стилями(SCSS)
4. BEM методолгия
5. Pixel-perfect
6. Кроссбраузерность
7. Работа с GIT