Сборщик html-верстки, основанный на gulp.js. Облегчает и ускоряет процесс html-верстки любой сложности. Подойдет как командам, так и отдельному разработчику. TARS решает большинство рутинных дел, связанных с версткой, чтобы вы получали больше удовольствия от работы.
TARS — сборщик-фреймворк, включающий в себя набор gulp-тасков, предоставляющий возможность легкого расширения (создания новых тасков) и модифицирования уже существующих.
Это не npm-пакет. Такое решение было принято, чтобы каждый мог максимально комфортно кастомизировать сборщик под себя.
Ниже перечислена только малая часть особенностей, на самом деле их гораздо больше)
- Jade или Handlebars на выбор в качестве html-шаблонизатора. Также можно использовать обычный html. Подробности здесь.
- Использование json (а точнее js-объекта, который может быть описан в json) для передачи данных в шаблоны (опционально, но очень крутая штука, которая позволит избавиться от копипаста). Подробнее тут.
- SCSS, LESS или Stylus в качестве препроцессора для css. Также в комплекте идет небольшой набор миксинов. Также можно использовать обычный css. Подробности здесь.
- Никаких внешних библиотек и плагинов (кроме html5shiv). И да, это фича, так как вы вольны сами выбирать, какие библиотеки использовать.
- Watching за изменениями файлов (создания и удаления). В текущей версии gulp вотчер имеет много проблем. Поэтому был написан свой модуль для этого. С 4 версией gulp будем использовать встроенный, так как планируется, что он избавится от всех недостатков. Текущий вотчер работает весьма хорошо, не ест проц, но не без недостатков.
- Расшариванием верстки с вашего компьютера во внешний веб, опционально. Ну и конечно же 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-версии проекта без вотчеров.
Ключи, доступные при любом режиме сборки:
--ie9– включить в сборку стили для ie9.--ie8– включить в сборку стили для ie8.
gulp update – обновление всех зависимостей сборщика до последних стабильных. Может потребоваться какое-то время на выполнение данной команды. Желательно выполнять раз в неделю. Команда скопирует текущий package.json, добавит к его имени подчеркивание, скачает новый package.json с репозитория и выполнит npm install. Таким образом, если у вас что-то сломалось с новыми пакетами, то всегда можно вернуться на прошлую версию, просто вернув прошлый package.json
- Файловая структура
- Работа с тасками и вотчерами
- Опции
- Html
- Css
- Js
- Работа с изображениями
- Работа со шрифтами и misc-файлами
- Сценарии использования
- FAQ
Все последние изменения доступны по ссылке: История изменений.
По всем вопросам можно писать в issues или на почту artem.malko@gmail.com.