From Grunt to NPM — Part 1

Background, Motivation and Prepping

Matti Bar-Zeev
Aug 26, 2017 · 6 min read

There is a lot of buzz around using NPM scripts as a task runner driving build processes, but most of the content out there speaks in slogans without really touching real project aspects and challenges, so we at Capriza decided to really dive into it and see if our Designer product’s front-end build process can benefit from it.
Here is what we’ve learned…

Some Background

Capriza’s Designer

Capriza’s Designer is the tool to use in order to create your own Zapp (Micro-App) by dragging & dropping web components onto a mobile canvas while configuring the Zapp flows and the styling you desire.
The Designer is a Firefox add-on (a.k.a extension) which holds a web content and as such it goes through a standard build processes web front-end project go these days, and in our case, using Grunt.

Hey, what’s wrong with Grunt?

Why would you use tools like Grunt/Gulp and the likes to begin with?
Well, these tools provide a way to automate and break a build process into well defined units with distinct outcomes and later on combines them together to assemble final product artifacts.
It allows us to configure the process and control its flow, and though Grunt delivered what was expected of it, working with it over time became somewhat of a maintenance burden. Here are some of the reasons behind it:

These are the main reasons behind our desire to find a better solution for our build process.

Why then NPM?

There are quite a few option like Gulp and Broccoli, why then use NPM?
As far as we were concerned there were 2 main reasons why NPM scripts suited our needs best:

Simplicity

Using NPM scripts is simple and to the point. If you need to know what the script does you go to the node package documentation and there you have it. No need to read any Grunt plugin or any other 3rd party docs.

Commonality

Working on front-end project there is a great probability that NPM is already involved in the process, even if you’re not using it as your task runner tool.
So was it on our case. It is already there and does not require additional installation or configuration, so if we can use it for more purposes — why not?

More Control. Less Errors.

Invoking the node packages directly via CLI or creating your own scripts and triggering them gives you more control on what’s being done and avoids unexpected errors which might happen due to misalignment between the Grunt plugin and its corresponding Node package.

Flexibility and Updates

Using NPM means you have the ability to practically utilize every node package out there for your needs, which cannot be said about Grunt for Grunt needs a plugin wrapper over that node package — a plugin that might not exist yet. Moreover, in many cases it is hard to keep up to date with the latest node package versions since it’s Grunt wrapper we depend on does not support it yet.


Prepping towards migration

Grunt used to manage the entire Capriza’s Designer build process. The build was consisted out of several tasks. Each one of these is a candidate to be migrated to NPM and we shall later see the set of challenges some presented, but our first task was to understand what Grunt currently does for us.
Here are the main ones:


In this part we’ve seen what were the motivations behind migrating our Designer’s build process to NPM and the set of challenges ahead of us.

Part 2 of this article will send us diving into the details behind core tasks described above, leaving nothing behind for Grunt.

Capriza Engineering

Capriza engineering blog focused on technology, interesting challenges and related topics

Matti Bar-Zeev

Written by

Mind reflections & individual thought patterns of one code musician ▪ Believes in craftsmanship ▪ Culture over Technology ▪ Always learning...

Capriza Engineering

Capriza engineering blog focused on technology, interesting challenges and related topics

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade