/tars

Markup builder on gulp

Primary LanguageJavaScriptMIT LicenseMIT

============= [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/2gis/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

Сборщик html-верстки, основанный на gulp.js. Облегчает и ускоряет процесс html-верстки любой сложности. Подойдет как командам, так и отдельному разработчику. TARS решает большинство рутинных дел, связанных с версткой, чтобы вы получали больше удовольствия от работы.

TARS — сборщик-фреймворк, включающий в себя набор gulp-тасков, предоставляющий возможность легкого расширения (создания новых тасков) и модифицирования уже существующих. TARS предоставляет удобную архитектуру хранения тасков и вотчеров в проекте.

Это не npm-пакет. Такое решение было принято, чтобы каждый мог максимально комфортно кастомизировать сборщик под себя.

Основные фичи

Ниже перечислена только малая часть особенностей, на самом деле их гораздо больше)

  • Jade или Handlebars на выбор в качестве html-шаблонизатора. Также можно использовать обычный html. Подробности здесь.
  • Использование json (а точнее js-объекта, который может быть описан в json) для передачи данных в шаблоны (опционально, но очень крутая штука, которая позволит избавиться от копипаста). Подробнее тут.
  • SCSS, LESS или Stylus в качестве препроцессора для css. Также в комплекте идет небольшой набор миксинов. Также можно использовать обычный css. Подробности здесь.
  • Никаких внешних библиотек и плагинов (кроме html5shiv). И да, это фича, так как вы вольны сами выбирать, какие библиотеки использовать.
  • Используется модуль chokidar для вотчинга файлов.
  • Расшариванием верстки с вашего компьютера во внешний веб, опционально. Ну и конечно же livereload в браузере (и не только локально) + графический интерфейс к панели управления устройствами, на которые расшаривается верстка.
  • Можно легко добавлять новые таски и вотчеры. Есть примеры того, как создать и использовать новый таск или вотчер внутри TARS.
  • Умная работа с изображениями. В первую очередь с вектором (svg). Больше не будет ада при верстке сайтов для экранов с высокой плотностью пикселей.
  • Несколько режимов сборки (обычная, с минифицированными файлами, с хешем в названии css- и js-файлов для выкладки в продакшн).
  • Создание архива с готовой сборкой.

Установка

Необходимо установить nodeJS версии >= 0.8 Далее необходимо установить gulp глобально. (Возможно потребуются права суперюзера или администратора)

npm install -g gulp

Скачайте TARS и распакуйте в рабочую директорию у себя на компьютере. Затем устанавливаем зависимости. Команда запускается из папки с файлами TARS (обычно это tars-master).

npm install

Если не все зависимости были установлены, то последнюю операцию нужно повторить.

После установки всех зависимостей необходимо открыть tars-config (подробное описание опций здесь) и настроить проект под себя. В конфиге вы можете выбрать шаблонизатор, css-препроцессор, использование уведомлений, имена папок для различной статики и т.д. После настройки проекта, выполняем следующую команду:

gulp init

Данная команда создаст базовую файловую структуру, подтянет таски для выбранных вами шаблонизатора и css-препроцессора.

Все готово, можно колбасить :)

Основные команды

gulp init — Инициализирует проект с заданными опциями в tars-config. Создает файловую структуру.

gulp re-init — Переинициализирует проект с заданными опциями в tars-config. Предлагается использовать данную команду, если вы инициализировали проект с неверными опциями. При переинициализации все папки и файлы удаляются.

gulp или gulp build — делает сборку проекта. Подключаются не минимизированные файлы. Тип сборки зависит от переданных ключей вместе с этой командой. Доступные ключи:

  • --min – в html подключаются минимизированные файлы.
  • --release – в html подключаются минимизированные файлы, в названии которых есть hash. Данный режим полезен, если вы напрямую выкладываете верстку на сервер.

gulp dev — инициализация сборщика в режиме разработки. Создается dev-версия проекта, без всех минификаций. Также запускает вотчеры за файлами проекта. Доступные ключи:

  • --lr – инициализация livereload (живая презагрузка страницы при изменениях в файлах проекта), если он включен в конфиге проекта.
  • --tunnel – инициализация проекта с расшариванием верстки во внешний веб.

Ссылка будет указана в консоли. Также будет указана ссылка на панель управления устройствами, на которые расшарена верстка.

gulp build-dev — генерация dev-версии проекта без вотчеров.

Ключи, доступные при любом режиме сборки:

  • --ie8 – включить в сборку стили для ie8.

gulp update-deps – обновление всех зависимостей сборщика до последних стабильных. Может потребоваться какое-то время на выполнение данной команды. Желательно выполнять раз в неделю. Команда скопирует текущий package.json, добавит к его имени подчеркивание, скачает новый package.json с репозитория и выполнит npm install. Таким образом, если у вас что-то сломалось с новыми пакетами, то всегда можно вернуться на прошлую версию, просто вернув прошлый package.json Также вы можете ознакомиться с руководством по обновлению.

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

Важно! Все примеры в документации используют настройки по умолчанию.

Последние изменения

Все последние изменения доступны по ссылке: История изменений.

По всем вопросам можно писать в gitter или на почту artem.malko@gmail.com
Баги и фича-реквесты сюда: issues.