Web Solutions Blog: TARS: Free, Ready-To-Use Markup Builder

Front End is really huge nowadays. We have to draw sprites, transpile ES to js, less/sass/stylus to CSS and so on. And it is only becoming more and more complex over time. A lot of routine processes, which developers had to perform manually 2-3 years ago get fully automated today. But for an every old routine, there emerge two new ones, which often slow down the rate of our work, and kill all the pleasurable experience we get from the very process of front end development.

That is why I always advise to learn and implement new automating tools and techniques, which help you get rid of the boring manual routine and concentrate on the creative effort.

One of such tools that I’ve stumbled upon recently was TARS. TARS is a markup builder for front end, based on Gulp. Basically, it’s a framework with a set of gulp-tasks, which allows creating new tasks and modifying existing ones easily. You don’t need to have any experience with Gulp to work in TARS, since it provides its own UI architecture for storing tasks and watchers of your projects.

FEATURES

Here are some features that TARS comes packed with:

Jade or Handlebars as HTML templater.
Webpack (with Hot Module Replacing) or simple JavaScript-code concatenation in one bundle.
The command line interface (TARS-CLI), which auto-updates your version of the software.
ES6 (and some experimental features from ES7) integrated.
SCSS (SASS), LESS or Stylus as a preprocessor for CSS. Also includes a small set of mixins. Sourcemaps are integrated.
No external libraries and plugins (except html5shiv). Yes, this is a feature because you can choose any library you like and use it. Sourcemaps for JavaScript are included.
Uses Chokidar module for file watching.
Smart image processing, primarily, the SVG vector graphics. No more struggle with markup for screens with high pixel density. TARS supports two workflows of working with SVG: SVG-sprites and SVG-symbols.

This is not the complete list of features – new ones add up with every global update. You can check out all of the current features on the project’s official GitHub page. The full list of documentation is also available there.

INSTALLATION

There are two ways to set up TARS on your system:

by installing the TARS-CLI (recommended method), or
by installing the TARS package, and then manually installing the required dependencies.

Let us go through the TARS-CLI installation process. To the ones who like to setup everything manually, please check out this list of instructions.

TARS-CLI is an interface of the main builder, which enables the user to:

Initialize the project;
Start the dev-command with browser reloading and opening the tunnel connection;
Start the build-command with the minified files or in release mode;
Add components to different sets of files;
Add an empty page or copy an existing page.

The prerequisites for running TARS are Node.js version 4.x.x or higher, and NPM version 3.3.10 or higher.

In order to install the TARS-CLI:

For Unix-based systems

From your terminal, run the following command:

npm i -g tars-cli

If you get a ‘Permission denied’ or an ‘Error: EACCES’ , try running the command again with sudo.

For Windows

From the command line or any other terminal, navigate to the Node.js installation folder (typically it’s C:\Program Files (x86)\nodejs). Then, execute the command:

npm install npm@latest

After that, run the TARS-CLI installation command, as in Linux.

To initialize your first project, type the following command into the line:

tars init

FILE STRUCTURE

The TARS builder will have the following structure:

And this is how the structure of your typical build is organized:

The file structure is generated automatically, so you don’t have to create anything manually. For the sub-structures of each particular components or builds, please refer to the Structure FAQ section.

BASIC COMMANDS

From the command line interface, an array of commands is available. All commands have a similar executing template: tars + command-name + flags

You can run the tars –help without additional commands and flags at any moment. This command displays information about all available commands and flags. Also you can add the –help key to any command to get full description of this command.

The tars –version command will display the current version of TARS-CLI installed on your computer and the version of TARS in your current project. Also, you will be informed whether updates are available.

Almost all commands run in the interactive mode, so you can communicate with CLI like it has its own GUI. If you are using interactive mode you don’t need to bother remembering which the flags are responsible for what. The interactive mode is easy to disable if you use automatic testing or something else that doesn’t require the human presence.

Here are the basic TARS commands:

tars init — TARS initialization;
tars dev — run dev task in TARS;
tars build — run build task in TARS;
tars start — run custom task from local gulp-file;
tars add-component — add component to markup/components;
tars add-page — add page to markup/pages;
tars update — update the TARS-CLI;
tars update-project — update TARS in current project.

Other custom commands are described in the relevant FAQ section of the project.

* * *

TARS was first released in late 2015, and by now it has updated to the version 1.8.3. Run by a team of only 3 people, this tool is becoming popular especially in the web development industry. TARS is distributed on a free-to-use basis, has an open source code, and is welcoming any side contributions.

For me and my colleagues, TARS has been a real time saver and organizer, which helped to reduce the amount of routine manual coding, and focus on doing what we love doing – designing fresh and innovative front end solutions.

You might also want to read “Development Trends that Will Shape the Web in 2016“

Bogdan Voydevich is the Lead Front End Developer at Vintage Web Production – one of the most awarded web studios in Eastern Europe. An inspiring artist and graphic novelist, Bogdan likes to create visually appealing and innovative front end solutions for the web. You can reach out to Bogdan via Facebook or Instagram.

The post TARS: Free, Ready-To-Use Markup Builder appeared first on SpyreStudios.