npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@reuters-graphics/runner

v0.1.6

Published

A better way to organize npm scripts, with argument hoisting, env variable management and complex task chaining.

Downloads

2

Readme

🏃 runner ‍

A better way to organize npm scripts, with argument hoisting, env variable management and complex task chaining.

npm version Reuters open source software

Why this?

If you're like us, you've broken up with task runners like Grunt and Gulp. Using plain node scripts helps us steer clear of plugin bottlenecks, but calling those scripts and chaining them together into complex tasks -- especially with CLI options -- can be a bit ugly to do in package.json.

runner gives us a more natural way to map out how our scripts are called and clearly define the arguments and environment they share. It makes our NPM scripts easier to read, keeps our individual task CLIs clean and helps us write better, friendlier task chains.

What's it do?

runner uses a tasks key in your package.json (or a dedicated config file) to help orchestrate your NPM scripts. You can chain scripts into complex tasks and compose arguments passed down through your task's commands.

Quickstart

  1. Install.
yarn global add @reuters-graphics/runner

... or ...

npm install -g @reuters-graphics/runner
  1. Configure tasks either directly in package.json or in a .tasksrc.js file in the root of your project.
{
  "tasks": {
    "build": { ... }
  }
}
  1. Call a task from the root of your project using runner's CLI.
$ runner build

Writing tasks

At its simplest, each key is a task you can call with runner.

// .tasksrc.js
module.exports = {
  tasks: {
    // A task
    cat: {
      // An array of commands to run when a task is called.
      run: [
        ['echo', ['meow']],
      ],
    },
  },
}

Call the task with the CLI:

$ runner cat
# meow!

Commands can include positional and named arguments.

module.exports = {
  tasks: {
    dev: {
      run: [
        ['webpack', ['index.js'], { config: './config.js', env: 'prod' }],
      ],
    },
  },
}
$ runner dev
# Calls:
#   webpack index.js --config ./config.js --env prod

You can refer arguments passed to the task in each command using a special notation, $.

// .tasksrc.js
module.exports = {
  tasks: {
    dev: {
      run: [
        // $1: the index of the positional arg passed to the "dev" task
        // $env: named argument, --env, passed to the "dev" task
        ['webpack', ['$1'], { config: './config.js', env: '$env' }],
      ],
    },
  },
}
$ runner dev index.js --env prod
# Calls:
#   webpack index.js --config ./config.js --env prod

Add environment variables to the scope of your task.

module.exports = {
  tasks: {
    build: {
      run: [
        ['webpack', ['$1'], { config: './config.js', env: 'prod' }],
      ],
      env: {
        NODE_ENV: 'production',
      },
    },
  },
}

Call scripts and other tasks to create complex task chains.

// .tasksrc.js
module.exports = {
  scripts: {
    'img': 'npx ./bin/imgResizer.js',
    'aws': 'aws s3 sync ./dist/',
  },
  tasks: {
    build: {
      run: [
        ['img', { sizes: '$img' }],
        ['webpack', ['$1'], { config: './config.js', env: 'prod' }],
      ],
    },
    publish: {
      run: [
        ['build', ['$2']], // 2nd positional passed as 1st to "build"
        ['aws', ['$1']],
      ],
    },
  },
}
$ runner publish s3://stagingBucket index.js  --img 600 --img 1200
# Calls:
#   npx ./bin/imgResizer.js --sizes 600 --sizes 1200
#   webpack index.js --config ./config.js --env prod
#   aws s3 sync ./dist/ s3://stagingBucket

Writing inputs

If you're writing your tasks config in .tasksrc.js file, you can also define functions in an inputs key that can change or supply additional positional and named arguments to your task chains.

module.exports = {
  tasks: {
    build: { /* ... */ },
    publish: {
      run: [
        'ask:locale',
        ['build', { locale: '$locale' }],
        // ...
      ],
    },
  },
  inputs: {
    'ask:locale': async({ args, kwargs }) => {
      const prompts = require('prompts');

      const { locale } = await prompts({
        type: 'select',
        name: 'locale',
        message: 'Which locale do you want to publish?',
        choices: [
          { title: 'English', value: 'en' },
          { title: 'Spanish', value: 'es' },
          { title: 'German', value: 'de' },
        ],
      });

      kwargs.locale = locale;
    },
  },
}

Help tips

You can write tips to tell a user what commands are available and descriptions for what they do in a help key in your .tasksrc.js file.

module.exports = {
  tasks: {
    build: { /* ... */ },
    publish: { /* ... */ },
    'img:resize': { /* ... */ },
  },
  help: {
    publish: 'Build and publish your project.',
    'img:resize': 'Create responsive image sets for srcset attrs.',
  },
}

Now when a user runs $ runner without a task, they'll see your tips.

Testing

$ yarn build && yarn test