Developing

Prerequisites

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

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

npm install --global windows-build-tools

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

sudo apt-get install gcc g++ make

Setting up Dev

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

git clone

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

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

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

npm install

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

npm start

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

Building

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

npm run build

Deploying / Publishing

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

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

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

npm run deploy

Если нет ошибок в коде и свойство homepage указано верно, запустится сборка проекта в продакшен, после чего содержимое папки build будет помещено в ветку gh-pages на удаленном репозитории. Через какое-то время живую страницу можно будет посмотреть по адресу указанному в отредактированном свойстве 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');
}