Yvelious/csssr-project-template

Шаблон проекта для быстрого старта.

CSSSR Project Template

Шаблон проекта для быстрого старта.

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

• Установите gulp и bower глобально:

npm i -g gulp@3.8.8 bower

Для gulp устанавливать версию 3.8.8 для корректной работы.

• Склонируйте себе репозиторий и перейдите в папку проекта:

git clone git@github.com:CSSSR/csssr-project-template.git new-project && cd new-project

• Установите зависимости, запустив hook.sh (находится в папке проекта) или вручную:

npm i && bower i

• Запустите Gulp.js:

gulp

• Откройте в браузере http://localhost:3001/.

Команды для запуска с Gulp.js

• Для открытия на другом порте укажите параметр --port=9000:

gulp --port=9000

• Для сборки скриптов и стилей без минификации укажите параметр --debug:

gulp --debug

• Для воспроизведения звука при ошибках укажите параметр --beep:

gulp --beep

• Для сжатия изображения укажите задачу imagemin:

gulp imagemin

Структура папок и файлов

├── app/                               # Исходники
│   ├── images/                        # Папка изображений
│   │   ├── sprite/                    # PNG изображения для генерации спрайта
│   │   └── sprite.png                 # Генерируемый спрайт, по умолчанию спрайта нет
│   ├── resources/                     # Статические файлы для копирования в dist/
│   ├── scripts/                       # Папка со скриптами
│   │   ├── libs/                      # Папка с библиотеками, устанавливается из bower
│   │   |── debug.js                   # Идентификация отладки на локальном сервере
│   │   └── common.js                  # Главный скрипт
│   ├── styles/                        # Папка со стилями Stylus
│   │   ├── base/                      # Базовые стили
│   │   │   ├── base.styl              # Базовый стилевой файл
│   │   │   ├── fonts.styl             # Подключение шрифтов
│   │   │   └── normalize.styl         # Сброс стилей
│   │   ├── blocks/                    # Стили блоков
│   │   |   └── main.styl              # Стили блока главной страницы
│   │   ├── components/                # Компоненты (кнопки, тестовые поля и т.п.)
│   │   ├── helpers/                   # Помощники
│   │   │   ├── mixins.styl            # Премиси
│   │   │   ├── sprite.styl            # Переменные с данными спрайта, по умолчанию файла нет
│   │   │   └── variables.styl         # Переменные
│   │   ├── partials/                  # Стили частиц страниц
│   │   │   ├── footer.styl            # Стили подвала
│   │   │   └── header.styl            # Стили шапки
│   │   └── common.styl                # Главный стилевой файл
│   └── templates/                     # Папка с шаблонами Jade
│       ├── blocks/                    # Папка с подключаемыми блоками
│       ├── helpers/                   # Папка с помощниками
│       │   ├── mixins/                # Папка с премисями
│       │   │   └── scripts.jade       # Премиси для скриптов
│       │   ├── mixins.jade            # Подключенные премиси
│       │   └── variables.jade         # Переменные
│       ├── layouts/                   # Папка с шаблонами раскладки
│       │   └── default.jade           # Шаблон раскладки по умолчанию
│       ├── pages/                     # Папка с генерируемыми страницами
│       │   └── index.jade             # Шаблон одной из страниц
│       └── partials/                  # Папка с подлючаемыми шаблонами
│           ├── footer.jade            # Шаблон подвала
│           ├── head.jade              # Шаблон с ресурсами, SEO и мета-тегами
│           ├── header.jade            # Шаблон шапки
│           └── scripts.jade           # Шаблон для вывода скриптов
├── dist/                              # Сборка
│   ├── assets/                        # Подключаемые ресурсы
│   │   ├── images/                    # Папка изображений
│   │   ├── scripts/                   # Папка скриптов
│   │   └── styles/                    # Папка стилей
│   └── index.html                     # Индексная страница
├── gulp/                              # Подключаемые скрипты для gulpfile.js
|   ├── tasks/                         # Скрипты с задачами для Gulp.js
|   ├── utils/                         # Утилиты в помощь к задачам
│   └── paths.coffee                   # Список путей для генерации файлов
├── .bowerrc                           # Конфигурация Bower с установкой папки для скриптов
├── .csscomb.json                      # Конфигурация форматирования CSS
├── .jscsrc                            # Конфигурация проверки JavaScript в JSCS
├── .jshintrc                          # Конфигурация проверки JavaScript в JSHint
├── .editorconfig                      # Конфигурация настроек редактора кода
├── .gitignore                         # Список исключённых файлов из Git
├── bower.json                         # Список библиотек для установки с помощью Bower
├── gulpfile.js                        # Файл для запуска Gulp.js
├── hook.sh                            # Набор команд для установки зависимостей NPM и Bower
├── package.json                       # Список пакетов и прочей информации
└── readme.md                          # Документация шаблона

Описание для некоторых папок:

• app/ - папка с иходниками, из которой генерируюется dist/.
• app/images/ - папка с фонами, паттернами и прочими стилевыми изображениями.
• app/images/blocks/ - папка для картинок, относящихся к определённм блокам, по умолчанию папки нет.
• app/images/sprite/ - папка с PNG-изображениями для генерации спрайта в app/images/sprite.png и файла стилей с CSS-переменными в app/styles/sprite.styl.
• app/images/content/ - папка для временного контента, например, для товаров, аватарок, обложек и т.п., по умолчанию папки нет.
• app/resources/assets/data/ - папка для данных в формате json, по умолчанию папки нет.
• app/resources/assets/fonts/ - папка для шрифтов, по умолчанию папки нет.
• app/resources/assets/images/svg/ - папка для векторных изображений SVG, по умолчанию папки нет.
• dist/ - сборка сайта, по умолчанию её может не быть и можно без страха и риска её удалить, т.к. она генерируется каждый раз заново, при сборке всё её содержимое удаляется, поэтому руками в неё класть ничего не нужно.