cartero

cartero is an asset pipeline built on npm and browserify that allows you to easily organize front end code in multi-page web applications into reusable packages containing HTML, JavaScript, css, and images.

Overview

cartero eliminates much of the friction involved in the build process when applying modular design principles to front end assets in multi-page web applications. Use directories to group together assets (js, css, images, etc.) for each UI component, and cartero will take care of ensuring that all the appropriate assets are then loaded on the pages that require them, and just those pages. Depending on a package is as simple as

require( 'pork-and-beans' )

A package might contain assets for

• A calendar widget
• A popup dialog
• A header or footer
• An entire web page

cartero is a build tool. It does not introduce many new concepts, and the same modular organizational structure it facilitates could also be achieved by stringing together other build tools and the appropriate

See this article for more info on how cartero compares to other tools, and this tutorial to get started.

Command line usage

Build all assets for a multi-page application with the cartero command. For example,

$ cartero "./views/**/index.js" "./static/assets"

This command will gather up the js and other assets required by each JavaScript entry point matching the first argument (in this case, all

index.js

views

cartero only processes each asset one time, so compiling assets for many entry points at once is extremely efficient. Each additional entry point adds practically no overhead. cartero also separates out any JavaScript assets that are used by all your entry points into a common bundle, so that the browser cache can be leveraged to load any shared logic quickly on each page. (This magic is done by factor-bundle - thanks for your wizardry, James!)

Adding a

-w

The hook

At run time, your application needs to be able to easily figure out where assets are located. For this reason, cartero provides a small (< 100 LOC) runtime library that your server side logic can use to look up asset urls or paths based on a simple map output by cartero at build time. At the time of this writing, only a hook for node.js is available, but one can quickly be written for any server side environment.

For example, if

views/page1/index.js

script

link

h.getTagsForEntryPoint( 'views/page1/index.js', function( err, scriptTags, styleTags ) {
  // scriptTags and styleTags and strings of