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

asset-manager

v0.3.8

Published

Asset manager built on top of connect-asset for managing multiple asset folders.

Downloads

76

Readme

asset-manager

Static asset manager that allows you to declare multiple asset folders that will be searched when resolving static assets in your app. This library also provides the ability to precompile all of the static assets into their production form (e.g., minified content with hashed filenames). The precompile step generates a manifest file that will be used in production to resolve requested assets. It also generates a clientManifest that can be in the browser to dynamically load static assets (e.g., people using the Inject dependency management library - https://github.com/linkedin/inject)

build status

How?

First, install it in your project's directory:

npm install asset-manager

Then add this line to your app's configuration:

var assetManager = require('asset-manager')

Finally, initialize the manager with the paths it should search for static assets:

assetManager.start({
    paths: ["assets", 
            "../global/assets", 
            "vendor"],
    inProd: (process.env.NODE_ENV === 'production')
  }, callback);

Markup functions

asset-manager provides three global functions named img, js, and css. Use them in your views to resolve static assets into the markup need to resolve these assets in your page. For instance, in an [EJS template]:

<%- css('normalize') %>
<%- js('jquery') %>
<%- img('icon') %>

Express Middleware

If you want to have your app serve the static assets as well (a likely case at dev time), you can use the provided Express middle ware to do this:

app.use(assetManager.expressMiddleware);

Express Production Middleware

If you want to have your app serve the static assets in production as well, you can use the provided static Express middle ware to do this (the final parameter is whether or not the assets are gzip encoded):

app.use(assetManager.staticAssetMiddleware(express.static(__dirname + '/builtAssets', { maxAge: 31536000000 }), true));

Precompile assets

You can precompile your assets into their production form as follows (CDN_BASE_URL should be set to whatever url you want prepended to your static asset paths):

assetManager.precompile({
    paths: ["assets", 
            "../global/assets", 
            "vendor")],
    servePath: CDN_BASE_URL,
    gzip: true
  }, callback);

Options

If you like, you can pass any of these options to the start or precompile functions:

  • paths (required): An array of paths that should be used to find static assets.
  • inProd (defaults to false): Indicates whether the application is running in production mode or not.
  • servePath (defaults to ''): The path you want to append to all asset urls. Useful for pointing at an external CDN location.
  • builtAssets (defaults to 'builtAssets'): The folder you want precompiled assets to be placed in.
  • context (defaults to global): The object you want to hang the 'css', 'js', and 'img' functions on for resolving static assets.
  • gzip (defaults to false): Whether or not to gzip the contents of 'css' and 'js' files.
  • scanDir (defaults to ''): Include a base path you want asset-manager to scan for modules that contain asset-manifest.json files indicating the module contains static assets that should be available for use.