Jarvis: The Intelligent Front-End Task Runner [Updated 2021]

What is a task runner?

Say Hi to Jarvis!

Jarvis is our fast, strong, and reliable high-tech task runner. It never lets us down. It has become an inevitable part of the arsenal of coding tools we use daily. With the help of Jarvis, we do multiple repetitive tasks, which would normally be boring and slow, at speed. Here is what Jarvis is capable of:

Jarvis bundles CSS files and minimizes them.

Regardless of the environment, Jarvis merges our .scss, .less or .css files into a single bundle file. Modules, plugins, libraries, frameworks – their styles are merged into a single stylesheet. It can also minify the bundled CSS file. This saves additional kilobytes and makes pages load faster.

Jarvis bundles JS files.

We often happen to work with multiple JavaScript files in multiple directories. Jarvis makes sure that in the end only one file is downloaded by the browser. Again, the same as with the CSS files, the JS can optionally be minified to increase the performance of the pages.

Jarvis injects HTML parts.

We split our HTML files into repetitive chunks for easy maintaining and minimization of repetition. Jarvis makes sure that these HTML chunks are properly included in the final version of the HTML files.

Jarvis copies assets.

When creating a front-end project, we usually work with a large variety of assets – images, fonts, documents, videos, audio files, etc. Jarvis makes sure that all of these assets are copied in the final version of the project. The tool even makes sure not to copy unused assets. And if there is a valid reference to an image or a font file inside an SCSS file, it will be copied to the final version of the project.

Jarvis optimizes images and generates sprites, even for the SVGs

Regardless of the image format, Jarvis makes sure that no unneeded kilobytes are downloaded by the browser. The task runner optimizes JPGs, PNGs, GIFs, and even SVGs.
And Jarvis has a built-in SVG sprite generator that will combine all SVGs that are added in a specific directory into one SVG with multiple `<symbol>` tags (one for each SVG from the directory). This allows us to easily add icons to the SVG sprite and change their colors if needed.
Additionally, we’ve developed our own plugin which creates image sprites from the icons used in the pages. Basically, we slice multiple image files but deliver only one optimized image sprite.

Jarvis reloads the browser.

It uses BrowserSync to watch HTML, CSS, JS files and when a change occurs, the tool reloads the browser. This saves plenty of time Alt+Tabbing and refreshing the page.

Jarvis uses SCSS with the ability to use SCSS Glob and Autoprefixer.

The SCSS compiler allows the usage of all SCSS features like variables, mixins, extends, loops, IFs, etc. Jarvis will import automatically all SCSS files inside a directory simply by using the `*` selector.
And we no longer write vendor prefixes. This function is automated by Jarvis. Just let the tool know which browsers to support.

Jarvis knows the latest JavaScript.

How to use Jarvis.

Jarvis comes preinstalled in all of our front-end projects. The tool depends on Node.js, so in order to use its abilities, you must install the Node.js runtime by following the official instructions. The following guide assumes that you have a Bash terminal installed (either default terminal on OSX/Linux, or GitBash on Windows).

• After Node is installed, all you have to do is run npm i or yarn. This command will install and setup the packages which Jarvis needs in order to do its job.
• When the steps above are complete, start Jarvis with one of the following commands: npm start or yarn start.
• When you are done coding and want to produce a built version of the codebase, you have to run either npm run build or yarn build.
• If you wish to minify the CSS and JS bundles and optimize all images, run one of the following: npm run prod or yarn prod.

The latest version of the task runner uses a package manager when working with dependencies. This means that we no longer manually download and install our dependencies. Now we use the command-line interface (CLI) to add and remove packages.

The most popular package managers are Yarn and NPM. The latter comes built-in with NodeJS. The task runner supports both package managers and can work equally fast and reliably with any of them. Now when using the CLI we can add and remove all kinds of CSS/JS plugins, libraries, frameworks. All it takes is a command.

For example, if you want to install Bootstrap, you must run one of the following commands: npm i bootstrap or yarn add bootstrap. This command will install Bootstrap and Popper.js which is a Bootstrap dependency.

Then, you have to import the CSS and JS files:

• CSS: @import '~bootstrap/dist/css/bootstrap.css';
• JS: import 'bootstrap';

That’s it! You can now start using Bootstrap.

What’s Next?

We will continue developing our task runner to make it better, faster, and stronger. We plan on creating different branches of the task runner which will be project, client, or environment-specific. For example, we’ve already produced a SASS and LESS version and are looking forward to developing a Shopify version. We also plan to implement a task runner in our back-end WordPress process. The future is bright and full of opportunities.

Task Runner + Internal Coding Standards = Success!

It’s not a secret that we have developed our own internal coding standards and we are constantly improving them. We believe that combined with our great coding standards, the task runner makes the front-end process complete and future-proof. Want to share your thoughts?

See you next time,
htmlBurger team