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

@n1k1t/task-processor

v0.1.21

Published

Runner for background and cli tasks with SASS/CommonJS bundlers using native multithreading

Downloads

8

Readme

Task processor

Runner for background and cli tasks with SASS/CommonJS bundlers using native multithreading

How to install

npm i -D @n1k1t/task-processor

or

yarn add -D @n1k1t/task-processor

How to: Do first steps

  1. Create .js executable file for tasks
  2. Register task
const { registerCliTasks } = require('@n1k1t/task-processor');

/*
  Tasks which you are going to use from command line should be registered 
  with the "registerCliTasks" function
*/
registerCliTasks([
  {
    name: 'greeting',
    use: [
      { processor: 'middleware', fn: () => console.log('Hi there!') }
    ]
  }
]);
  1. Run it from console
node #your script
  1. Type greeting in the console
  2. Check the message from middleware "Hi there!" in the console
  3. Done!

Methods

...comming soon

Processors

...comming soon

How to: Watch and bundle of SASS

const { registerBackgroundTasks } = require('@n1k1t/task-processor');

/*
  The "registerBackgroundTasks" with the "watch" option is for tasks 
  which should watch some files for change and run automatically
*/
registerBackgroundTasks([
  {
    name: 'css',
    watch: { match: 'path/to/src/*.scss', ignore: ['_*.scss'] },
    use: [
      { processor: 'sass-bundle' },
      { processor: 'write-files', dir: 'path/to/dest' }
    ]
  }
]);

How to: Use Livereload for the dynamic injection of CSS/Image

  1. First, you need to install a livereload plugin for your browser. Here is the Plugin for Google Chrome
  2. Turn on the livereload plugin on the page which using bundled sass files
  3. Write some code
const { registerBackgroundTasks, useLivereload } = require('@n1k1t/task-processor');

/*
  The "useLivereload" creates a web socket server for integration with browser
  If you already have another process with the same server then 
  it creates the client which will integrate with the first one
*/
useLivereload();

registerBackgroundTasks([
  {
    name: 'css',
    watch: { match: 'path/to/src/*.scss', ignore: ['_*.scss'] },
    use: [
      { processor: 'sass-bundle' },
      { processor: 'write-files', dir: 'path/to/dest' },
      { processor: 'livereload', type: 'inject' }
    ]
  }
]);

How to: Create/resize/convert images

There you can find the Sharp opportunities

const { registerCliTasks, useLivereload } = require('@n1k1t/task-processor');

useLivereload();

registerCliTasks([
  {
    name: 'create-picture',
    use: [
      {
        processor: 'sharp',
        create: {
          width: 48,
          height: 48,
          channels: 4,
          background: { r: 255, g: 0, b: 0, alpha: 0.5 }
        },
        pipeline: sharp => sharp.png()
      },
      { processor: 'write-files', dir: 'test/dest', name: 'result' },
      { processor: 'livereload', type: 'inject' }
    ]
  }
]);

How to: Bundle Common JS

const { registerBackgroundTasks } = require('@n1k1t/task-processor');

registerBackgroundTasks([
  {
    name: 'js',
    watch: 'path/to/src/app.js',
    use: [
      { processor: 'commonjs-bundle' },
      { processor: 'write-files', dir: 'path/to/dest' }
    ]
  }
]);

How to: Bundle of several SASS files with multithreading

const { registerCliTasks, useThreads } = require('@n1k1t/task-processor');

/*
  NOTE!!!
  
  The "useThreads" function creates workers each CPUs count in your system

  The "execPath" argument should contain the path to module where tasks 
  are registred. 

  It's important because workers have different processes. And that's 
  not possible to forward functions with some lexical environment or 
  closure to another process
*/
useThreads({ execPath: module.filename });

registerCliTasks([
  {
    name: 'css',
    description: 'This task gets all SASS files in "path/to/src" and bundles they to "path/to/dest"',
    add: { path: 'path/to/src/*.scss', ignore: ['_*.scss'] },
    use: [
      { processor: 'sass-bundle' },
      { processor: 'write-files', dir: 'path/to/dest' }
    ]
  }
]);

How to: Watch for several files change but bundle only one

const { registerBackgroundTasks, useLivereload } = require('@n1k1t/task-processor');

useLivereload();

registerBackgroundTasks([
  {
    name: 'js',
    watch: { 
      match: 'path/to/src/**/*.js', 
      triggerOnly: true // This option wont pass changed file to the task context
    },
    use: [
      { processor: 'get-files', path: 'path/to/main/file.js' },
      { processor: 'commonjs-bundle' },
      { processor: 'write-files', dir: 'path/to/dest', name: 'app' },
      { 
        processor: 'livereload', 
        type: 'reload' // Use type with "reload" for the page refreshing
      }
    ]
  }
]);

TODO

  1. Add plugins support