Taskifying NPM Scripts

Let’s say we have the following definitions in the scripts section of our Eleventy project’s package.json file:

"scripts": {
	"clean": "rm -r ./dist",
	"dev:build": "eleventy",
	"dev:serve": "eleventy --serve"
}

We can create one Custom Task that defines Build, Run, and Clean actions to handle all three NPM scripts.

Creating a Task

  1. Open Project Settings (under the Project menu)
  2. Click the button next to Tasks in the sidebar
  3. Choose Custom Task

Defining Task Actions

A single Nova task can support Build, Run and Clean actions — scripts or commands that can be invoked from the toolbar, menu items or the command palette.

Let’s define a Run action for our new Custom Task that will start Eleventy’s local development server:

  1. Click the Run tab and then check Enable the Run action for this task
  2. Since we want to execute a shell command each time the Run action is invoked, choose Shell Script from the Script menu
  3. Type or paste the NPM command we want Nova to execute:
npm run dev:serve
Configuring a **Run** action for our new *Custom Task* in the **Project Settings** sheet

There isn’t any relationship between the name of our NPM scripts in this example and the Nova task actions we assign them to.

That’s it! The same steps apply for creating Build and Clean tasks.


Invoking Task Actions

Once our task and its actions are configured, we can take them for a spin.

Build

To run Eleventy once and build our static site, we can:

  • Click the 🔨 icon in the toolbar
  • Press Command-B
  • Choose Build from the Project menu
  • or Invoke the Command Palette, type build, and press Return

Run

To run Eleventy’s built-in server and watcher, we can:

  • Click the ▶️ icon in the toolbar
  • Press Command-R
  • Choose Run from the Project menu
  • or Invoke the Command Palette, type run, and press Return

Clean

To run Eleventy’s built-in server and watcher, we can:

  • Press Command-Shift-K
  • Choose Clean from the Project menu
  • or Invoke the Command Palette, type clean, and press Return

Task Configuration

Arguments

Custom Tasks can also be defined using the path of an existing local script, or be configured with arguments and environment variables:

Configuring arguments and environment variables for *Custom Tasks*

Scripts

In addition to shell scripts, Custom Tasks also support:

  • JavaScript
  • Lua
  • Perl
  • Python
  • Ruby
  • TypeScript

Reports

The output of a Custom Task action is logged to the Reports sidebar, and can be automatically opened in a number of different scenarios:

  • Never
  • On Run
  • On Finish
  • On Success
  • On Failure

Tasks aren’t limited to local execution. Nova provides remote shell access as well.

Next…
Remote Tasks
Previously…
Run Tasks

This article was last updated on October 5, 2020