Supercharge Your JavaScript Build Scripts With Bake

So you’re going to build a cool new web app. Great! You’ve created a new package.json using npm init and pulled in some packages you’ll be needing. You want it to be extra fancy so you’ve got a whole bunch of tools set up to automatically compile your project to the correct ECMAScript specification. Above that, you want to use TypeScript so much of your mistakes are caught before debugging. Oh, and while we’re at it, why not use a test runner to execute your unit tests?

Maybe your package.json looks something like this:

So far so good. Now I just need to run npm run watch:compile-tests, npm run watch:tests and npm run serve in three separate terminals each time I start working on my project. At least I can use tabs or something like concurrently. Oh wait, npm run prepare doesn’t work on Windows because && is Bash syntax. What if someone who prefers Windows joins our team or wants to contribute? Sigh … Maybe this setup isn’t so great after all. Maybe I should just return to using Grunt or Gulp, but I’m not in the mood for messing with all of those plugins. Is there a tool that could help me stick to just npm-run-script?

Let’s find out!

Enter Bake

Bake is meant to put your npm scripts on steroids. It has some really nice features:

• A built-in Bash shell that also works on Windows.
• A nice syntax for defining dependencies and specifying which tasks should run in parallel.
• Full integration with scripts defined inpackage.json. Even projects not specifically configured for Bake will work!

Using Bake, all your processes are spawned next to each other in just one NodeJS instance. Each time you re-invoke Bake inside a script, Bake will catch the command and run it in the main process. This not only results in very clean log files but also has the nice bonus of reduced memory consumption.

Sound cool and all, but how do you actually use it?

Simplicity Is Key

The command-line tool can be installed with npm or yarn. It’s very small, so it shouldn’t take long to download.

npm install -g @samvv/bake

If you’re in a hurry, you could just run bake watch without making any modifications to your package.json. Bake will expand the watch to a regular expression and runs every matched script in parallel. So running bake watch in the example project would execute both watch:compile-tests and watch:tests at once. If you just run bake without any augments, Bake will look for a special script named bake and run that.

So the bake command runs npm scripts in parallel. Why not use that command inside a new script? Here’s our modified scripts with a new entry:

Notice the new lint-while-testing rule. I installed @samvv/bake as a local dependency so that I’m able to use it inside the script. Now I can run all kinds of things in parallel and just use Bash-style && and || whenever I need to run something sequentially. The real magic is that invoking Bake inside one of those shell scripts does not spawn a new process. This means no cluttered output, no special JSON configuration files, and a little more free memory.

Your computer, probably,

There are still some rough edges. Only Bash idioms most commonly used inside package.json have been implemented. The tool also doesn’t have a lot of options. You can’t customize the output prefix of tasks, for example. If some developers need to customize something I’ll certainly take a look at it!

The Next Steps

Under the hood, Bake is just a Bash interpreter written in JavaScript with a few custom built-ins. In a next phase, the interpreter might be moved to a separate library so you can use it in other projects. A shell for navigating a website, anyone? For now though, I’m very happy that this tool works and improves my productivity.

You can download Bake now from npm. Like I said, the project still has some rough edges, so if you encounter any bugs please post them in the issue tracker. That way, we can finally use npm scripts the way they should be used!

See you next time!