Inside htmlBurger, Web Development

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

Let’s welcome Jarvis. The htmlBurger’s task runner you will love.

The code is our life here at htmlBurger. We do that all day, every day, and we love it. But what truly matters for both you and us, is what we deliver to be maintainable, clean, and optimized. And while we strictly follow these rules, we always explore options to do our work more efficiently. This is why we came up with the idea of creating our own front-end task runner. The result is a simpler, faster, and more efficient code that handles complex tasks with just a few lines of code. Now, let’s dig deeper.

What is a task runner?

A task runner is a tool that lets us automate several repetitive tasks in the process of front-end coding.
We started using a task runner back in 2012. Since then we’ve updated its capabilities several times. After a while, we realized we needed a better task runner, so… we built a new task runner using Node.js, Gulp, and Webpack. Thanks to their speed, simplicity, and an extremely large ecosystem of plugins and add-ons, these tools helped us build the highly effective task runner we are currently enjoying.

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.

Since 2015 JavaScript has changed – the new specification introduces new syntax and new features. While the language update is awesome, there is one thing that makes things not so bright: The new and fancy syntax is unreadable to older browsers (yes, we are looking at you, IE).
In order to translate the new JavaScript, Jarvis uses Babel and Webpack. The former is a transpiler for modern JS code and the latter is a module bundler. Working together, they both make it possible to use the latest JS code in older browsers. Jarvis utilizes the power of these tools to allow us code that uses the latest ES2015, plus features without worrying about older browsers.
This means that we can split our JS codebase into separate files, use let and const, take advantage of arrow functions and all other goodies. In the end, Jarvis will give us a single translated JS bundle which the tool can minify if asked.

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

Subscribe for our newsletter

We hate boring. Our newsletters are relevant and on point. Excited? Let’s do this!