Inside htmlBurger

Jarvis: The Intelligent Front-End Task Runner

Code is life here at htmlBurger. We code all day everyday and we love it. But what truly matters for both you and us, is for the produced code to be maintainable, clean and optimized. While we strictly follow these principles we’ve set, we also like to do it quickly. This is why we came up with the idea of creating a front-end task runner. The result is a simpler, faster and more efficient daily routine. Now, let’s dig deeper.

What is a task runner?

The task runner is a tool which lets us automate several repetitive tasks in the process of front-end coding. Before we dive into any more details, here is the brief historical background of how Jarvis was born. 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 by using Node.js and Gulp. Thanks to their speed, simplicity, and extremely large ecosystem of plugins and add-ons, these tools helped us build the highly effective task runner we are currently enjoying.

Welcome 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:

  1. Jarvis bundles CSS files.
    Regardless of the environment, Jarvis merges our .scss, .less or .css files into a single bundle. Modules, plugins, libraries, frameworks – their styles are merged into a single stylesheet.
  2. 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.
  3. 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.
  4. 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.
  5. Jarvis optimizes images.
    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.
  6. Jarvis reloads the browser.
    It usesBrowserSync to watch HTML, CSS, JS files and when a change occurs, the tool reloads the browser. This saves plenty of time Alt+Tabbing and hitting Refresh.
  7. Jarvis uses PostCSS.
    This is a tool for transforming styles with JS plugins. It has a large variety of plugins which have different functions based on a given project’s requirements. Our default setup includes the following:

    • Importing CSS files.
      Jarvis helps us import external libraries’ CSS files, our own CSS files and it even handles image imports.
    • Generating image sprites.
      We’ve developed our own PostCSS 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.
    • Copying images and fonts used in the stylesheet files.
      If there is a valid reference to an image or a font file inside a CSS file, it will be copied to the final version of the project.
    • Generating a Table of Contents.
      An automated and handy option which shows the content of the bundled CSS file.
    • Usage of variables in PostCSS.
      We can now use variables as if we are working with SASS or LESS codebase.
    • Ability to use PostCSS mixins.
      These are chunks of CSS code which are repeated all over the files.
    • Ability to use PostCSS Extend.
      Similar to the mixins but not allowing arguments.
    • Ability to use the PostCSS color function.
      This function helps creating RGBA colors out of a variable.
    • Ability to use Autoprefixer.
      We no longer write vendor prefixes. This function is automated by Jarvis. Just let the tool know which browsers to support.
    • Last but not least, Jarvis can minify the bundled CSS file.
      This saves additional kilobytes and makes the pages load faster.
  8. 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@4.0.0-beta popper.js or yarn add bootstrap@4.0.0-beta popper.js. 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

Leave a Comment