- Сборщик: Bower
- Task-manager: Gulp
- NPM используется для пакетов для Gulp и т.п.
При создании нового проекта на основе данного старт-кит,
нужно сделать fork.
Чтобы произвести установку проекта, нужно просто запустить Bower:
cd app
bower install
Зависимости будут установливаться в папку:
/app/vendor
Исключение для основного фреймворка, его файлы устанавливаются в:
/app/base-framework
Файл bower.json содержит в себе только расширенные компоненты.
Базовый фреймворк указывается в .bowerrc.
# Корневая папка приложения.
# Если приложение делится на модули,
# они имеют подобную структуру.
/app
┬
├─ ./packages.json
├─ ./gulpfile.js
├─ ./^node_modules/
├─ ./^vendor/
│
│ # исходники, которые будут собираться в HTML и Angular2-компоненты
├─ ./src/
│ ┬
│ ├─ ./index.scss # основной SCSS-файл, в котором определяется порядок подключения стилей
│ ├─ ./^base-framework/ # папка для фреймворка, который берется за основу (по-умолчанию — Materialize)
│ ├─ ./fonts/
│ │ ┬
│ │ ├─ ./svg-src/ # исходники для SVG-шрифтов
│ │ └─ ./ttf-src/ # исходники для текстовых шрифтов
│ │
│ ├─ ./icons/ # SVG-иконки
│ ├─ ./images/ # растровые изображения (только для примера — для галерей и т.п.)
│ │
│ │ # общие (базовые и глобальные)
│ │ # стили проекта
│ ├─ ./styles/
│ │ ┬
│ │ ├─ ./style-guide/
│ │ │ ┬
│ │ │ ├─ ./index.scss
│ │ │ ├─ ./_colors.scss # переменные с используемой в проекте палитрой
│ │ │ ├─ ./_fonts.scss # переменные с именами шрифтов
│ │ │ ├─ ./_typographics.scss # mixins и классы-модификаторы с базовыми типографскими пресетами
│ │ │ └─ ./_icons.scss # классы элементов с иконками
│ │ │
│ │ └── ./layouts/
│ │ ┬
│ │ ├─ ./index.scss
│ │ ├─ ./_pages.scss # базовые свойства страницы: мин/макс ширина,фон, границы расположение блока под шапку и подвал, и т.п.
│ │ ├─ ./_grid.scss # кастумные настройки grid system под проект
│ │ ├─ ./_sections.scss # базовые свойства секций (те же самые, что и для страницы)
│ │ ├─ ./_page-columns.scss # колоночная система в странице: варианты расположения колонок в секциях
│ │ ├─ ./_dialogs.scss # базовые свойства диалогов (те же самые, что и для страницы)
│ │ └─ ./_banners.scss # базовые свойства баннеров (те же самые, что и для страницы; содержимое описывается ../components)
│ │
│ │ # типовые составные компоненты,
│ │ # из которых будет собираться страница
│ ├─ ./components/
│ │ ┬
│ │ ├─ ./_base-blocks/ # блоки, используемые для выделения части информации (заливка, границы, тень, цвет шрифт и т.п.)
│ │ ├─ ./_extended-typographics/ # расширенные элементы типографики (основываются на базовой типографике, но могут иметь произвольщные цвет, отступы, декорирование)
│ │ ├─ ./_controls/ # элементы управления (кнопки, ссылки, чек-боксы, радио, тогглеры и т.п.)
│ │ ├─ ./_form-controls/ # элементы формы (поля ввода и т.п.)
│ │ ├─ ./_helpers/ # прикладные полезные элементы (badges, breadcrambs, )
│ │ ├─ ./_other/ # прочие односложные элементы, не попадающие под общу/ классификацию (как правило, специфичные для проекта)
│ │ ├─ ./complex/ # сложные блоки (карточки товара, галереи и т.п.)
│ │ ├─ ./messages/ # сообщения
│ │ └─ ./layout-elements/ # сложные блоки, которые используются в макете: шапка, подвал, фиксированные части страницы (в том числе, обратная связт и звонок)
│ │ .
│ │ .
│ │ .
│ │ └─ <component-name> # пример компонента в одной из указанных категорий (превращаются в общие для приложения Angular2-директивы)
│ │ ┬
│ │ ├─ ./index.scss
│ │ ├─ ./index.js
│ │ └─ ./index.html
│ │
│ │
│ │ # представления, целиком, или порезанные
│ │ # на под-представления
│ └─ ./views/
│ .
│ .
│ .
│ └─ <page-name> # пример организации исходников конкретной страницы (превращаются в Angular2-компоненты)
│ ┬
│ ├─ ./includes/ # составные части страницы (превращаются во вложенные Angular2-директивы)
│ │ ┬
│ │ ├─ ./_<partial-name-1>.html
│ │ └─ ./_<partial-name-2>.html
│ │
│ └─ ./index.html
│
│
│ # сборка собранных из исходников HTML-страниц (для демонстрации)
├─ ./^dist
│ ┬
│ ├─ ./styles/
│ │ ┬
│ │ ├─ ./vendors.css
│ │ └─ ./main.css
│ │
│ ├─ ./scripts/
│ │ ┬
│ │ ├─ ./vendors.js
│ │ └─ ./main.js
│ │
│ ├─ ./fonts/ # общая папка для текстовых и иконочных шрифтов
│ │ ┬
│ │ ├─ ./index.html # файл для демонстрации шрифтов (не приоритетно)
│ │ ├─ ./text-fonts.css # подключение font-family обычных шрифтов
│ │ ├─ ./icons-font.css # подключение font-family графических шрифтов + классы иконок
│ │ ├─ ./text/ # обычные шрифты
│ │ └─ ./icons/ # иконочные шрифты
│ │
│ ├─ ./svg/
│ │ ┬
│ │ ├─ ./index.html # файл для демонстрации SVG-спрайтов (не приоритетно)
│ │ └─ ./sprites/ # SVG-спрайты
│ │
│ ├─ ./images/
│ └─ ./views/
│ .
│ .
│ .
│ └─ <page-name.html> # пример организации исходников конкретной страницы (превращаются в Angular2-компоненты)
│
│
│ # исходники для Angular2-компонент, генерируемые
│ # на основе HTML-исходников
└─ ./^ng2-src
┬
├─ ./components
│ .
│ .
│ <component-name> # пример папка для определенного компонента
│ ┬
│ ├─ ./index.html
│ ├─ ./index.ts
│ ├─ ./<component-name>.ts
│ └─ ./directives # директивы конкретного компонента генерируются на основе составных частей страниц в “/app/views/includes“
│
│
│
│ # общие директивы приложения
└─ ./common-directives # общие директивы генерируются на основе сложных (cоставных) компонент в “/app/components/(^[^_][\d\a\-]+$)/“;
# простые компоненты вставляются inline