============= [](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 Также вы можете ознакомиться с руководством по обновлению.

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

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

• Файловая структура
• Работа с тасками и вотчерами
• Опции
• Html
• Css
• Js
• Работа с изображениями
• Работа со шрифтами и misc-файлами
• Сценарии использования
• Руководство по обновлению
• FAQ

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

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

По всем вопросам можно писать в gitter или на почту [email protected]
Баги и фича-реквесты сюда: issues.