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

ups

v1.0.1

Published

Universal parcel service for asset building.

Downloads

12

Readme

Universal parcel service for asset building. https://npmjs.org/package/ups


Goals:

  • Infinite flexibility.
  • Maximum caching.
  • Zero downtime.
  • Instant serving.
  • Painless development.

Enter UPS. It has no implementation requirements, prefers being cached forever, can be switched in place, is completely static, and supports agile development.

Write a config. Call ups.build(). Load the resulting manifest. Serve chilled.

UPS processes each asset based on its type, eventually ending up with concatenated groups of CSS and JS. Then it saves each group in a file named with the checksum. Lastly, it stores the final list in a manifest, which can be loaded and inserted into HTML.

At SpotOn, we have a production deployer running UPS. After pulling an app, it builds the assets, then restarts the instances, and finally cleans up. This lets us enable full caching, since updated assets use new file names. And since the assets are built independently of the instances, the app can simultaneously run old and new assets without issues. During local development, we just run UPS when the app starts up. Ultimately, the resulting manifest is loaded into a global variable and used in our templates.


config
{
    "_src": ""
  , "_out": ""
  , "_web": ""
  , "group1": []
  , "group2": []
  , "groupx": []
}
  • A JSON file somewhere convenient. We suggest /assets.json.
  • _src is the file base path relative to the config. We suggest "".
  • _out is the file output path relative to the config. We suggest "public/ups".
  • _web is the web base path. We suggest "/ups".
  • Everything else should be groups of files relative to the config.

ups.types
Object of supported file types and their handlers. css and js are enabled by default. styl can be loaded via require('ups/types/...'). Supports custom types; each should have a type, render(file, data, next), and minify(file, data, next).

ups.build(config, minify, next)
Builds assets, optionally minifying them in the process. Writes the resulting files and manifest.json to _out.

ups.clean(config, next)
Removes extraneous files in _out.

manifest
{
    "all": {}
  , "css": {}
  , "js": {}
}
  • A JSON file saved to _out/manifest.json during building.
  • all is an object of all the files. The keys are the group name and file type, and the values are the checksum.
  • css is an object of all the CSS groups. The keys are the group name, and the values are the HTML.
  • js is an object of all the JS groups. The keys are the group name, and the values are the HTML.

© 2013 SpotOn, shared under the MIT License.