asset-manager

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

npm install asset-manager
57 downloads in the last week
147 downloads in the last month

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.
npm loves you