Внимание!

Проект реинкарнировался и текущая статья устарела. Однако, многие её части до сих пор соотносятся с настоящим.

Введение

Тренд сейчас такой — что тут ещё поделать?

Раньше всё приходилось делать самому: проверять валидность HTML и CSS, минифицировать ресурсы проекта, проверять скрипты с помощью JSHint, компилировать Less, объединять файлы и многое другое. Список этих обязательных к выполнению задач может раздуваться до бесконечности, в зависимости от того, что необходимо в проекте.

Было бы здорово автоматизировать все эти шаги достижения цели. Так родились менеджеры задач.

Сейчас, когда миром JavaScript разработчиков правит Node.js, появляется обширное поле для инноваций в сфере веб-разработки. Такой инновацией стали JavaScript менеджеры задач - Grunt и Gulp. Обязательно почитайте о них - это очень интересные инструменты.

Raptorius Web Kit

Raptorius Web Kit (RWK) — это простой и функциональный шаблон для вашего веб-приложения. Главная задача Raptorius - автоматическая сборка проекта, отслеживание изменений файлов и хороший стартовый набор ресурсов. Кроме того, Raptorius включает в себя средства для проверки вашего кода на соответствие современным стандартам.

Особенности

Запускаете Raptorius Web Kit в режиме ожидания и он следит за вашими файлами. Запускаете в режиме сборки проекта - получаете чистый, подготовленный к дальнейшей работе проект. Здорово, правда?

Raptorius Web Kit нацелен на максимально широкую аудиторию, которая стремится автоматизировать свой рабочий процесс, без чтения длинных мануалов и бессонных ночей оптимизации своего сборщика проектов.

Однако, если вы уверенно себя чувствуете, то не поленитесь посмотреть файл Gruntfile.js. Возможно, после этого вы оптимизируете его или решите сделать свой сборщик проектов, который подойдёт именно вам. Также, в конце статьи можно будет найти список, в котором собраны ссылки на альтернативы Raptorius Web Kit.

Документация

Полную документацию вы можете найти на wiki-странице репозитория проекта.

Системные требования

Установка

Raptorius Web Kit [Console Utility] работает на всех популярных платформах и подразумевает простую эксплуатацию существующего функционала. Однако, установка может отличаться в зависимости от операционный системы.

Подробное описание процесса установки можно найти на wiki-странице официального репозитория.

Технологии

Список технологий, которые использует Raptorius Web Kit:

  • Шаблон веб-приложения.
  • Встроенный сервер.
  • Синхронизация браузеров (BrowserSync).
  • Валидация файлов.
  • Поддержка CSS препроцессора Less.
  • Автоматическая расстановка префиксов браузеров.
  • Сортировка CSS свойств.
  • Минификация и объединение ресурсов проекта.

Внимание!

RWK предполагает полное использование CSS-препроцессора Less.

При необходимости, .css файлы можно использовать через каталог styles/vendor/. Использование такого подхода означает, что файлы каскадных таблиц стилей не будут проверяться на ошибки и предупреждения, свойства не будут сортироваться и автоматическая расстановка префиксов браузеров так же не работает.

Необходимо понимать, что нет никаких препятствий использовать .less файлы как .css файлы, то есть без применения особенностей CSS-препроцессора Less.

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

app/ ├── styles/ │ ├── vendor/ │ ├── common/ │ ├── library/ │ ├── modules/ │ ├── partials/ │ └── scaffolding.less │ ├── scripts/ │ └── vendor/ │ ├── images/ │ └── touch/ │ ├── apple-touch-icon.png │ ├── icon-196x196.png │ └── ms-touch-icon-144x144.png │ └── fonts/

Рассмотрим структуру проекта:

Стили (styles)

  • styles/ — каталог, содержащий стили проекта.
  • styles/scaffolding.less — точка входа всех .less файлов. Этот файл должен содержать только подключения (@import) других файлов стилей.
  • styles/common/ — каталог, содержащий .less файлы переменных.
  • styles/library/ — каталог, содержащий используемые во время разработки библиотеки.
  • styles/modules/ — каталог, содержащий стили модулей (типография, кнопки, формы). Основная идея директории - это структурирование стилей по типу bootstrap компонентов.
  • styles/partials/ — каталог, содержащий стили фрагментов страницы (header, navigation, main, footer и т.д.).
  • styles/vendor/ — каталог, содержащий библиотеки, поставляющиеся сторонними разработчиками.

Скрипты (scripts)

  • scripts/ — каталог, содержащий скрипты проекта.
  • scripts/vendor/ — каталог, содержащий библиотеки, поставляющиеся сторонними разработчиками.

Изображения (images)

  • images/ — каталог, содержащий изображения проекта.
  • images/touch/ — каталог, содержащий иконки для мобильных устройств.

Шрифты (fonts)

  • fonts/ — каталог, содержащий шрифты проекта.

Управление

Для удобства пользователей операционной системы windows (пока что только windows), был создан .bat файл, используя который можно увеличить свою производительность на ещё один пункт.

Итак, запускаем rwk.bat и перед нами приветливо появляется любимая консоль, в которой нас ждёт сообщение о том, что это первый запуск и надо загрузить все зависимости проекта:

Установка зависимостей

Внимание!

Если у вас не установлен grunt-cli, то прежде чем начать установку зависимостей проекта, будет предложено установить его.

Установка глобальных зависимостей

После соглашения на загрузку и ожидания её завершения, в консоли появляется приглашение использования Raptorius Web Kit с помощью ключей.

Запуск Raptorius Web Kit

Основные команды (ключи):

  • -w — запуск в режиме слежения за изменением файлов.
  • -p — запуск Grunt с пользовательскими параметрами.
  • -b — запуск сборки проекта:
  • Очищение build директории.
  • Запуск копирования системных файлов (.htaccess, robot.txt и т.д.) и проверка валидатором файлов *.html.
  • Замена имен ресурсов styles.css и scripts.js на их минифицированные версии - styles.min.css и scripts.min.js.
  • Копирования шрифтов.
  • Обработка стилей.
  • Обработка скриптов.
  • Обработка изображений.
  • Минификация ресурсов.
  • -css — обработка стилей.
  • -js — обработка скриптов.
  • -img — обработка изображений.
  • -html — запуск копирования системных файлов (.htaccess, robot.txt и т.д.) и файлов .html.
  • -i — обновление зависимостей (плагинов).
  • -c — очистка build директории.
  • -cmd — командная строка.

Если запустить RWK с ключом -w, то все изменения в файлах проекта будут отслеживаться и запускать необходимую задачу.

Так, например, при изменении файла в директории styles/** будет запускаться задача обработки стилей и обновление состояния браузеров, а при добавлении нового изображения в директорию images/** запустится задача обработки изображений и обновления состояния браузеров.

Сборка

Не стоит забывать, что минификация ресурсов проекта будет производиться только при финальной сборке проекта, а именно при запуске RWK с ключом -b.

Ссылки

Дополнительную информацию по работе с Raptorius Web Kit можно найти по следующим ссылкам: