Gulp Starter Kit ·

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

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

Developing

Prerequisites

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

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

npm install --global windows-build-tools

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

sudo apt-get install gcc g++ make

Setting up Dev

Для быстрого старта необходимо склонировать репозиторий.

git clone https://github.com/luxplanjay/gulp-starter-kit.git

Переименовать папку сборки по имени вашего проекта.

mv gulp-starter-kit имя_проекта

Затем перейти в папку проекта.

cd имя_проекта

Находясь в папке проекта удалить папку .git связанную с репозиторием сборки выполнив следующую команду.

npx rimraf .git

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

npm install

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

npm start

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

Building

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

npm run build

Deploying / Publishing

Сборка может автоматически деплоить билд на GitHub Pages удаленного (remote) репозитория. Для этого необходимо в файле package.json отредактировать поле homepage, заменив имя пользователя и репозитория на свои.

"homepage": "https://имя_пользователя.github.io/имя_репозитория"

После чего в терминале выполнить следующую команду.

npm run deploy

Если нет ошибок в коде и свойство homepage указано верно, запустится сборка проекта в продакшен, после чего содержимое папки build будет помещено в ветку gh-pages на удаленном (remote) репозитории. Через какое-то время живую страницу можно будет посмотреть по адресу указанному в отредактированном свойстве homepage.

Configuration

Все файлы стилей должны лежать в папке src/sass и импортироваться в src/sass/main.scss
Изображения добавляйте в папку src/images
Локальные шрифты идут в папку src/fonts

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

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

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

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