Базовая Gulp-сборка для вёрстки.

• Собирает и оптимизирует html, sass, js, изображения и шрифты
• Использует gulp-file-include для работы с html-chunks
• Включает файлы настроек различных линтеров
• Все ошибки логируются в консоль
• Добавляет вендорные префиксы
• Совмещает и оптимизирует медиазапросы
• Есть режим разработки и сборки в продакшн
• Автоматический деплой на GitHub Pages

Для корректной работы SASS-компилятора и других инструментов, необходимо один раз глобально поставить дополнительные пакеты, выполнив в терминале следующие команды. Пользователям MacOS ничего делать не нужно.

Пользователям Windows.

npm install --global windows-build-tools

Установить все зависимости.

npm install

затем набираем в терминале

npm i [email protected] --save-exact

И запустить режим разработки.

npm run dev

Во вкладке браузера перейти по адресу http://localhost:3000](http://localhost:3000).

Для того чтобы создать оптимизированные файлы для хостинга, необходимо выполнить следующую команду. В корне проекта появится папка build со всеми оптимизированными ресурсами.

npm run build

• Все файлы стилей должны лежать в папке src/scss и импортироваться в src/scss/style.scss
• Изображения добавляйте в папку src/img/

Пример изображения в HTML, после того как файл picture.png был добавлен в папку src/img.

<img src="@img/picture.png" />

Пример изображения в CSS, после того как файл picture.png был добавлен в папку src/img.

.my-class {
  background-image: url("../img/picture.png");
}