Giter VIP home page Giter VIP logo

jaredly / asset-manager Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lynns/asset-manager

0.0 3.0 0.0 321 KB

Static asset manager that allows you to declare multiple asset folders that will be searched when resolving static assets in your app. You can even tell the asset-manager to scan your node_modules for assets that should be included in your app. This makes it easy to package up content and reuse it across projects. This library also provides the ability to precompile all of the static assets into their production form (e.g., aggregated, minified content with hashed filenames). Less support is built in so you can have Less files live side by side with css files.

JavaScript 99.15% CSS 0.85%

asset-manager's Introduction

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') %>

Supported CSS Precompilers

asset-manager has built in support for the following CSS preprocessors:

  • Less
  • Stylus

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.

asset-manager's People

Contributors

camshaft avatar jamesblack avatar jfhbrook avatar lynns avatar timshadel avatar tylerpeterson avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.