Барбершоп Бородинский

Содержание

• Вступление
• Ссылки
• Зависимости
• Начало работы с проектом
• Команды
• Структура проекта
• Использованные технологии
• Лицензия
• Автор

Вступление

Проект «Барбершоп» был выполнен в рамках пройденного онлайн‑курса «Продвинутый HTML и CSS» от HTML Academy.

За основу проекта был взят мой личный boilerplate. Для более детального ознакомления с инфраструктурой проекта тыкайте сюда.

Ссылки

Главная страница Desktop	Страница с формой Desktop	Страница с фотографиями Desktop

Главная страница Tablet	Страница с формой Tablet	Страница с фотографиями Tablet

Главная страница Mobile	Страница с формой Mobile	Страница с фотографиями Mobile

_{⇧ back to top}

Зависимости

• Node.js
• NPM или YARN

_{⇧ back to top}

Начало работы с проектом

Клонируйте репозиторий:

Клонируйте репозиторий, чтобы получить все исходные файлы доступные на Github:

$ git clone https://github.com/redeagleap/barbershop.git

$ cd barbershop/

А затем установите NPM-модули через:

#Ностальжи
npm install

#Хипстер
yarn

Это установит необходимую папку node_modules.

_{⇧ back to top}

Команды

С Webpack вы можете использовать следующие NPM Script команды

Действие	Npm	Yarn
Инициализация проекта и документации Sass(/sassdocs/)	npm run init	yarn run init
Основная команда для разработки с BrowserSync и Webpack	npm run dev	yarn dev
Сжимает JS, Images, CSS. Предназначен для автоматизированной сборки, после Gulp Init.	npm run build	yarn build
Перестройте все файлы JS, за исключением файла приложения JS.	npm run scripts	yarn scripts
Перестройте все файлы изображений для CSS, создайте растровые и векторные спрайты.	npm run uiimages	yarn uiimages
Скопируйте все файлы изображений для Documentusage.	npm run htmlassets	yarn htmlassets
Сгенерируйте Favicons и фрагмент HTML(сгенерированные файлы вы найдете в src/ .system/)	npm run favicon	yarn favicon

_{⇧ back to top}

Структура проекта

Папка dist/ создается после инициализации (npm run init) проекта. Все скомпилированные и скопированные файлы папок src/ находятся там.

SRC Folderstructure:

src/
├── .system/                          => Internal System Files
├── fonts/                            => Font Files
├── framework/                        => Sass Framework
├── images/                           => All Images
|   ├── bitmapSingle-assets           => Single Bitmap Images
|   ├── bitmapSprite-assets           => Images for Bitmap Sprites
|   ├── htmlimages                    => Content Images (`<img>`)
|   ├── vectorSingle-assets           => Single Vector Images
|   └── vectorSprite-assets           => Vector Images for Vector Sprites
├── js/                               => JS Files (e.g. main.js)
├── scripts/                          => Script files that are not installed
├── structure/                        => Source Files for Copy (e.g. Template Files for a WP Theme)
└── style/                            => Styling Source Files

Dist Folderstructure:

dist/
├── assets/                 => All Assets
|   ├── css/                => CSS Files
|   ├── fonts/              => Font Directory
|   ├── js/                 => Javascript Files
|   └── img/                => Background Image Assets
|       ├── system/         => Images like Favicons
|       ├── bitmaps/        => Bitmap Images
|       └── svgfiles/       => Vector Images
└── images/                 => Content Images

_{⇧ back to top}

Использованные технологии

Скрипты

• ES2017 - поддержка через компилятор Babel.

• Node - это кросс-платформенная среда выполнения JavaScript с открытым исходным кодом, которая выполняет код JavaScript вне браузера.

Стили

• Sass - является самым зрелым, стабильным и мощным языком расширения CSS профессионального уровня в мире.

• Sassdoc - это система документации для создания красивых и мощных документов в мгновение ока.

• PostCSS - это инструмент для преобразования CSS с помощью JavaScript

• Critical - извлекает CSS наиболее важный, для как можно более скорого отображения начального экрана сайта.

Автоматизация

• Gulp - представляет собой инструментарий для автоматизации болезненных или трудоемких задач в процессе разработки.

• Webpack - это пакет для JavaScript модулей.

Оптимизация

• Imagemin - минимизирует изображения в формате PNG, JPEG, JPG, GIF и SVG.

• Uglify - инструментарий синтаксического анализатора, минификатора, компрессора и улучшения JavaScript.

Сервер

• BrowserSync - синхронизированное тестирование в браузере.

Проверка синтаксиса

• ESlint - линтер для JavaScript.

• HTMLHint - инструмент анализа статического кода для HTML.

• Stylelint - это мощный, современный линтер, который помогает избежать ошибок и применять соглашения в стилях.

• Prettier - для форматирования кода.

Управление кодом

• Editorconfig - помогает разработчикам определять и поддерживать согласованные стили кодирования между различными редакторами и IDE.

• Git - является распределенной системой контроля версий, предназначенной для обработки всего, от небольших до очень больших проектов.

_{⇧ back to top}

Лицензия

Этот проект лицензирован по лицензии MIT - подробности см. В файле LICENSE.

_{⇧ back to top}

Автор

Барбершоп, сделано с любовью.
---------------------------------------
Автор : Александр Присяжнюк

Почта : insightinyourmind@gmail.com

Github : https://github.com/redeagleap/barbershop.git

_{⇧ back to top}