Skip to content

Latest commit

 

History

History
158 lines (104 loc) · 15.8 KB

README_RU.md

File metadata and controls

158 lines (104 loc) · 15.8 KB
Raw

English description | Описание на русском

Tars

Mac/Linux Build Status Windows Build status Gitter

TARS — сборщик frontend'а любой сложности, основанный на Gulp. Облегчает и ускоряет процесс разработки веб-сайтов/приложений, делая работу приятной и продуктивной. Подойдет как командам, так и отдельному разработчику. TARS решает большинство рутинных дел, связанных с веб-разработкой, чтобы вы получали больше удовольствия от работы.

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

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

Желательно пользоваться именно CLI-версией для разработки.

Вы можете установить TARS-CLI через npm. Больше информации в репозитории проекта.

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

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

  • Jade или Handlebars на выбор в качестве html-шаблонизатора. Также можно использовать обычный html. Подробности здесь.
  • Webpack (вместе с Hot Module Replacing) или простая конкатинация JavaScript-кода в один файл.
  • Использование json (а точнее js-объекта, который может быть описан в json) для передачи данных в шаблоны (опционально, но очень крутая штука, которая позволит избавиться от копипаста). Подробнее тут.
  • CLI-утилита и автообновление проекта.
  • Вы можете ипользовать ES6 (и некоторые фичи из ES7) уже сегодня. Подробнее в документации.
  • SCSS (SASS), LESS или Stylus в качестве препроцессора для css. Также в комплекте идет небольшой набор миксинов. Доступны sourcemaps. При выборе scss в качестве препроцессора, вы можете использовать как расширение scss, так и sass + можете миксовать их использование. Подробности здесь. В комплекте идет PostCSS с autoprefixer'ом. Также очень легко подключить дополнительные плагины для PostCSS.
  • Никаких внешних библиотек и плагинов (кроме html5shiv). И да, это фича, так как вы вольны сами выбирать, какие библиотеки использовать. Доступны sourcemaps для JavaScript.
  • Используется модуль chokidar для вотчинга файлов.
  • Расшариванием верстки с вашего компьютера во внешний веб, опционально. Ну и конечно же livereload в браузере (и не только локально) + графический интерфейс к панели управления устройствами, на которые расшаривается верстка.
  • Можно легко добавлять новые таски и вотчеры. Есть примеры того, как создать и использовать новый таск или вотчер внутри TARS. Это позволяет действительно легко интегрировать TARS в ваш проект или таски из вашего проекта в TARS.
  • Умная работа с изображениями. В первую очередь с вектором (svg). Больше не будет ада при верстке сайтов для экранов с высокой плотностью пикселей. Для работы с SVG поддерживаются два подхода: SVG-спрайты и SVG-symbols.
  • Несколько режимов сборки (обычная, с минифицированными файлами, с хешем в названии css- и js-файлов для выкладки в продакшн).
  • Создание архива с готовой сборкой.

В 2015 году я выступал с докладом о TARS на конференции DUMP. Можно ознакомиться с видео с выступления, на котором рассказывается об одной из первых версий TARS, но оно все еще актуально.

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

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

Установка

Обращаем ваше внимание, что предпочтительно использовать TARS-CLI. Это удобнее, нагляднее, занимает меньше места. При работе с TARS через TARS-CLI, все дальнейшие шаги по установке не требуются!

Необходимо установить Node.js версии >= 4.x.x Если вы используете Node.js версии 5.x.x, убедитесь, что вы используете npm версии 3.x.x и выше. В противном случае обновите npm:

npm i -g npm

Пользователям Windows необходимо выполнить еще пару шагов:

  • перейти в C:\Program Files (x86)\nodejs или C:\Program Files\nodejs в cmd.exe или в любом другом терминале. Путь зависит от того, куда Node.js был установлен;
  • запустите команду npm install npm@latest.

Возможно потребуются права суперюзера.

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

npm install -g gulp

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

npm install

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

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

gulp init

Обращаем ваше внимание, что предпочтительно использовать TARS-CLI. Команда инициализации доступна в TARS-CLI.

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

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

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

Обращаем ваше внимание, что предпочтительно использовать TARS-CLI. Это удобнее, нагляднее, занимает меньше места! Все команды, описанные ниже, доступны в TARS-CLI, используйте именно его для работы над проектом. TARS запускался через Gulp, когда не было CLI.

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.
  • --ie9 – включить в сборку стили для ie9.
  • --ie – включить в сборку стили для ie9 и ie8.

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

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

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

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

По всем вопросам можно писать в gitter или на почту [email protected]

Баги и фича-реквесты сюда: issues.